Vue-router 动态路由匹配
路由参数变化
举例：
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头， /user/foo 和 /user/bar 都将映射到相同的路由
{ path: ‘/user/:id‘, component: User }
]
});
/user/:username/post/:post_id 多个路由变量，也都可以再 this.$route.params中获取
注意： 从 /user/foo 到 /user/bar组件会被复用，组件不会卸载再加载不会触发生命周期钩子，可以使用监听器监听 $route 观察路径变化，组件内作出正确的响应，2.2版本提供 beforeRouteUpdate 路由钩子使用此场景
匹配任意路径或导航到404
通配符 路由，有通配符路由的地址，应该放在路由配置后面，保证路由执行顺序
{
// 会匹配所有路径，，用途：放在路由配置最后，，不管输入什么地址都是不在范围内，需要转到404
path: ‘*‘
}
{
// 会匹配以 `/user-` 开头的任意路径
path: ‘/user-*‘
}
需要获取匹配到的路径的模糊字段值，可以从 params 中的 pathMatch 获取。
如果是 History模式，跳转到未知路径需要报404，因为history模式下路径会访问后端发器请求，需要后台服务配合解决404的场景。
高级匹配模式 和 匹配优先级
https://github.com/pillarjs/path-to-regexp#parameters path-to-regexp 匹配一个或多个，匹配一类等高级用法。
优先级: 匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
嵌套路由
路由组件配置中需要增加 children 字段，字段值结构还是和routes一一致，表示子路由路径。
在index入口的html结构中，div id为app的标签内使用增加了 <router-view></router-view> 这是顶层视图出口。
所以呢，，要想设置子路由路径跳转切换，就需要增加一个 <router-view> 新的路由出口，渲染在 children 所在的 component的 <router-view></router-view> 里。
可以path为空会定位到父级根路径。
编程式的导航
- this.$router.push(location, onComplete, onAbort)
普通的导航跳转是使用导航链接 <router-link>，也可以通过编写代码来实现同样的效果，this.$router.push 会向history路径栈中push一个路径，达到和 router-link一样的效果。注意： 路径上需要有对应的参数。
a 字符串
router.push(‘home‘)
b 对象
router.push({ path: ‘home‘ })
c 命名的路由，变成 /user/123
router.push({ name: ‘user‘, params: { userId: ‘123‘ }})
router.push({ path: `/user/${userId}` }) 只有这两种方式可以给router传 params。
以下方式调用无效！！！ 变成 /user
router.push({ path: ‘user‘, params: { userId: ‘123‘ }})
d 带查询参数，变成 /register?plan=private
router.push({ path: ‘register‘, query: { plan: ‘private‘ }}) query 可以对应 path。
注意： 以上规则同时适用于 link 的 to 。
push replace 修改路径时，会执行回调函数，onComplete（调用完成） onAbort （路由终止）
- this.$router.replace(location, onComplete, onAbort)
replace 和 push 的区别不是很大，唯一的区别是它不会向history中添加新的记录，仅仅是替换掉当前history
- this.$router.go(Integer)
表示history记录中向前或向后进行多少步。 如果超过history中的步数会静默失败，不会到底!
命名视图
具名视图可以提供视图分块的效果，在同一路径下每个视图都对应不同组件，视图就是路由容器和展示模块。
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
视图嵌套：多层嵌套，多个视图的情况，需要注意 components 中组件的配置，和 router-view 中的name 对齐。
routes: [
{
path: ‘/‘,
components: { // 此处有component 单个组件和 多个组件 带有s的区别
default: Bind,
a: AccountManage,
b: IMManage
}
}]
重定向和别名
路径重定向： 参数类型支持 3 种，字符串，对象，函数返回值
{
path: ‘/‘,
redirect: ‘/newpath‘,
redirect: { name: ‘newpath‘ },
redircet: to => {
// ....to 仅仅是当前路径对象的信息，不是路由守卫。
return "/newpath/`${other}`"
}
}
重定向是把一个路径替换成其他路径，渲染新的路径的组件，别名有所不同，设置别名访问路径和访问别名是一样的。不过，需要注意，alias别名的名称如果要覆盖已有路径规则，需要放在路径名的配置之前，因为优先级从前向后。
路由组件传参
在组件中直接使用 this.$route.params 会降低组件复用的灵活性，那咋办？
解耦，将变量以props的形式传递给组件。 也更加方便，组件的重用和测试。
大致有 3 种在路由配置中给组件传递props的模式：布尔模式，对象模式，函数模式
const User = {
props: [‘id‘],
template: ‘<div>User {{ id }}</div>‘
}
const router = new VueRouter({
routes: [
{ path: ‘/user/:id‘, component: User, props: true },
// 对于包含命名视图的路由，分别给每个命名视图添加 `props` 选项：
{
path: ‘/user/:id‘,
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
props 除了使用bool型（会将params设置为组件的属性），还可以使用
对象型（使用对象型，对象作为组件的属性），
函数型（函数返回值作为组件的属性，必须尽量保证函数是纯函数，只在调用时返回给组件一个可靠的值）
原文地址：https://www.cnblogs.com/the-last/p/11391744.html