打开命令行下载
cnpm i vue-router -S
在components里创建one，two文件
one
<template>
<div>one component</div>
</template>
two
<template>
<div>two component</div>
</template>
第一种，在src里main.js里写上
import Router from 'vue-router'
import one from './components/one'
import two from './components/two'
Vue.use(Router);
const router = new Router({
routes:[
{
path:'/',
component:one // 跳转到one
},
{
path:'/two',
component:two // 跳转到two
}
]
})
new Vue({
el: '#app',
router, // 加上router
template: '<App/>',
components: { App }
})
第二种，在src里创建一个 router 文件夹 里面创建一个加上文件，必须叫 index.js
import Vue from 'vue'
import Router from 'vue-router'
import one from '../components/one'
import two from '../components/two'
Vue.use(Router);
export default new Router({
routes:[
{
path:'/',
component:one
},
{
path:'/two',
component:two
....
{
path:'*',
redirect:'/' // 在网址输入任何数都跳到 one 页面
}
]
})
子路由
// 再创两个文件 twoa.vue 和 twob.vue
......
{
path:'/two',
component:two,
children:[
{
path:'a',
component:twoa
},
{
path:'b',
component:twob
}
]
},
......
