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:{}
},
]
}
]
})
