动态路由

# 路由的基本使用
  ## html(主入口文件)
  <!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  <!-- 路由匹配到的组件将渲染在这里 -->
  <!-- 放一个路由视图（路由坑） -->
  <router-view></router-view>

  ## js(路由规则设置)
  1. import Vue from 'vue'                //
  2. import VueRouter from 'vue-router'   //引入vue-router依赖包
  3. import PageA from './views/PageA.vue'//引入路由级别的页面组件
  4. Vue.use(VueRouter)                   //使用 Vue.use(VueRouter) 去调用路由这款插件
  5. const router = new VueRouter({       //实例化router对象，并配置 routes 选项（路由规则）
      routes: [  
# 动态路由
      {                     // 动态路径参数 以冒号开头
        path: '/user/:id', //参数值会被设置到 this.$route.params，使用对应的id名获取调用$route.params.id
        component: User,
# 起别名
        alias: '/b'         //别名为b，虽然url上是/b但实际路径是/user/：id 
      }，
# 路由嵌套             
    在路由中嵌套子路由就是路由嵌套              
      {                             数组对象方式
        path: '/a',                 
        component: PageA，          //使用对应的引入的路由组件
        children: [             // 配置嵌套的子路由
          {
            //     /index/home
            path: 'home', // 子路由时 不以 / 开头，会自动携带父路由的路径
            name: 'home',
            component: Home,
          }
        ]
      }
    ]
  })
export default router       //把路由暴露出去
# 响应参数变化
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。
因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。
不过，这也意味着组件的生命周期钩子不会再被调用。
解决方案
1.watch监听
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
2.导航守卫
beforeRouteUpdate (to, from, next) {
  // react to route changes...
  // don't forget to call next()
}

# 捕获所有路由
{
  // 会匹配所有路径
  path: '*'，
  redirect:'/a'   //重定向到a
}
注，只能写到最后，不然后面路由代码不会执行