1. 动态路由匹配：
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
解决方法：
方法一： watch（监测变化） $route 对象；
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
方法二：beforeRouteUpdate 守卫；
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
2. 嵌套路由：（https://blog.csdn.net/github_26672553/article/details/54861174）
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
3. 命名视图（比如有菜单栏情况）：
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
<!-- 路由配置-->
{
path: '/settings',
// 你也可以在顶级路由就配置命名视图
component: UserSettings,
children: [{
path: 'emails', // 路由（/settings/emails）
component: UserEmailsSubscriptions
}, {
path: 'profile', // 路由（/settings/profile）
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
4. 重命名和别名：
重命名：
1.
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
2. 也可以写命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
3. 或者写一个方法：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
别名：不同的路由名字，相同的页面；
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
5. 向路由组件传递props：
通过props可达到解耦的效果，子组件通过 props：[] 来接收；
几种方式：
（1）布尔模式：如果 props 被设置为 true，route.params 将会被设置为组件属性。
（2）对象模式：如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。（相当于普通父子组件 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 }
}
]
})
对象模式：
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
函数模式：
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
6. H5 history 模式：
vue-router 默认 hash 模式，如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
7. 导航守卫（https://router.vuejs.org/zh-cn/advanced/navigation-guards.html）：
导航解析流程：
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter守卫中传给next的回调函数。
8. 滚动行为（https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html）：
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。
当创建一个 Router 实例， 有 scrollBehavior 方法。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
这个方法返回滚动位置的对象信息，长这样：
{ x: number, y: number }{ selector: string, offset? : { x: number, y: number }}(offset 只在 2.6.0+ 支持)
9. 404页面：
export default new Router({
routes: [
{
path: '*', // 404 页面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})
当进入一个没有 声明/没有匹配 的路由页面时就会跳转到404页面。
比如进入www.baidu.com/testRouter,就会自动跳转到notFind页面。
当你没有声明一个404页面，进入www.baidu.com/testRouter，显示的页面是一片空白。
来源：https://www.cnblogs.com/momo798/p/8980741.html