vue-router 使用 本教程源于官网https://router.vuejs.org/zh/guide/#javascript 的总结 提炼

vue-router（一）

vue调用如下
this.route 访问当前路由

（一） 动态路由

1 动态路由匹配

eg: /user/foo 和 user/bar 俩个路由使用同一个组件

  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]

匹配了怎么怎么到 /user/:id 的 id值呢
在组件下调用 $route.params.id 查询
有趣玩法: /user/:username/post/:post_id

2 响应路由参数的变化

同一组复用固然高效，但是不会出发vue的mount等函数
方法 1：利用watch

export default( {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
})

方法 2： 2.2 中引入的 beforeRouteUpdate 路由守卫

export default( {
  beforeRouteUpdate (to, from, next) {
      // 路由更新前调用
  }
})

3 捕获所有路由或 404 Not found 路由

• 类似正则的匹配 具体匹配规则 参照 https://github.com/pillarjs/path-to-regexp/tree/v1.7.0

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user` 开头的任意路径
  path: '/user*'
}

当路由时通过*匹配得出的 那么会有一个
this.$route.params.pathMatch 指向被匹配的部分
eg: 路由 /user/ffffff 则 this.$route.params.pathMatch 值时 /ffffff

4 匹配优先级

那个写在前面那个优先级高

（二）嵌套路由

及写子路由方法

const router = new VueRouter({
  routes: [
   // 这里时  /:id 下的子路由
    { path: '/user/:id', component: User,
      children: [
        {
          path: 'profile',  // 不是以/ 开头
          component: UserProfile
           name:"",
           meta:{}
        },
      ]
    }
  ]
})