vue-cli 路由、子路由

打开命令行下载

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
                }
            ]
        },
        ......