vue2.0-路由配置
Posted sunnyyangwang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0-路由配置相关的知识,希望对你有一定的参考价值。
vue2.0-路由配置
参考:https://router.vuejs.org/zh/guide/#html
使用vue-cli创建的项目,先不需要安装路由模块。
1.安装
cnpm install vue-router --save
以下步骤配置文件均在mains.js文件上配置
2、引入route模块
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
3、整体配置
//1、导入组件
import Home from ‘./components/Home‘
import News from ‘./components/News‘
//2、配置路由
const routes = [
{ path: ‘/home‘, component: Home},
{ path: ‘/news‘, component: News},
{ path: ‘/‘, redirect: ‘/home‘} //默认根路径跳转home组件
]
//3、实例化vue
const router = new VueRouter({
routes
})
//4、挂载路由
new Vue({
el: ‘#app‘,
router,
render: h => h(App)
})
新的配置文件下操作,
4、App.vue父组件引入路由和路由跳转
<!--5、根组件引用路由-->
<h4>路由示例</h4>
<p>
<router-link to = "/home">首页hone</router-link>
<router-link to = "/news">新闻news</router-link>
</p>
<router-view></router-view>
界面访问,
以上是关于vue2.0-路由配置的主要内容,如果未能解决你的问题,请参考以下文章