vue路由使用vue-router，在教程一中已经安装，并且有相关示例

vue-router官方文档：https://router.vuejs.org/zh-cn/ 

   主页面的App.vue中的<vue-router></vue-router>保存最上级的index

    子组件的vue中的<vue-router></vue-router>包含的是children的信息

routes:[    {        path:"/index",        name:"mycomponent",        component:MyComponent,        children:[            {                path:"index1",    //不要加斜杠                name:"index1",                component:MyComponent2            }        ]    }]

路由的访问：

    html标签：<a href="#/index/index1"></a>

    或 <router-link to='/index/index1'></router-link>

    js方法：

        window.location.href='#/index/index1' ，

        或：this.$router.push({path:'/index/index1'}) ......

  全局监听路由变化:

        watch:{

             $route:function(new,old){

                console.log(new,old);

            }

        }

        前置路由，后置路由，生命周期函数，文档里面都有，请参考文档

注意：

        vue中路由存在两个值 this.$router 和this.$route 至于为啥存在两个我也不清楚，求大神解释^-^

        this.$router 主要是执行动作的时候调用，如 跳转，前进，后退

        this.$route  主要为获取参数，如 this.$route.hash,this.$route.match等

如果没有使用，或者教程一中一不小心，没安装vue-router，就进行以下操作：

    cnpm install vue-router --save

路由的使用：

    除了教程一中的系统默认的方法加载路由，还有其他的方法

    1.在components里面写上自己的组件MyComponent.vue

    2.创建route的文件夹，写上index.js,贴上以下代码

import Vue from 'vue'import Router from 'vue-router'import MyComponent from "../components/MyComponent.vue"Vue.use(Router);export default new Router({    routes:[        {            path:"/index",            name:"mycomponent",            component:MyComponent        }    ]})

3.main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App.vue'import router from './route/index.js'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({    el: '#app',    template: '
    ',    components: { App },    router:router                  //如果键名称和import的模块名称一样也叫router，键可以不写。换名字的一定要写router:***})

4.App.vue