详细教程：
Vue Router
菜鸟

基础

一、 安装

npm install vue-router

二、 起步

1. 接入vue-router

Vue.use(VueRouter);
const routes = [
  { path: '/path', component: NextPage },
  { path: '/bar', component: Bar }
]
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

2. 路由入口：（两个方式）

（1）声明式，html

//  相当于一个<a/>标签
    <router-link to="/path">Go to Next Page</router-link>

（2）编程式 $router
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
添加name，给路由命名，命名路由。

                this.$router.push('/path');
                 // name 命名路由
                this.$router.push({ name: 'user', params: { userId }}) // -> /user/123

3. 路由出口

                        <router-view></router-view>

三、动态路由匹配

1. 一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
2. 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
3. 捕获所有路由或 404 Not found 路由，使用通配符 (*)。当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分。
4. 高级匹配模式； path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式。
   例子

四、嵌套路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其他子路由
      ]
    }
  ]
})

五、命名路由、重定向（redirect）、别名（alias）

六、路由组件传参

七、h5 history模式

（六七没太看懂，不知道在哪用）

进阶

（略）之后用到在看一下，能看明白，不知道咋用。