本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
随着越来越能看开一些事情，做个俗人的想法越来越强烈。
“没关系的，大家都会做错选择，会莫名其妙掉眼泪，走在路上会突然奔溃，但这并不影响我们去看看晚霞，再次爱上这个世界。”
就像现在参加的掘金活动，做技术的积累，不知道会给自己带来什么，那就不再想了，时间会给你答案。今天继续，讲讲路由的基础知识。
Vue Router
以下路由规划、配置在:router/index.js文件中
动态路由匹配
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果,router/index.js:
{ path: '/user/:id', component: User }
通配符
{
// 会匹配所有路径
path: '*',
component: () => import('../views/404.vue')
}
命名路由
通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
调用 router.push() 时：
router.push({ name: 'user', params: { userId: 123 }})
路由守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 全局守卫:
router.beforeEach((to, from, next) => {
// ...
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。
})
路由独享的守卫----可以路由配置上直接定义 beforeEnter 守卫：
{
path: '/',
name: '',
// ...
beforeEnter(to, from, next) {
if (to.meta.auth) {
if (···) {
next()
} else {
next(···)
}
} else {
next()
}
}
}
组件内守卫
可以在路由组件内直接定义以下路由导航守卫：
-
beforeRouteEnter
-
beforeRouteUpdate
-
beforeRouteLeave
路由组件缓存
利用keepalive做组件缓存，保留组件状态，提高执行效率
<keep-alive include="about"> //缓存about组件
<router-view></router-view>
</keep-alive>
使用include或exclude时要给组件设置name;两个特别的生命周期：activated、deactivated
路由懒加载
路由组件的懒加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
() => import("../views/Login.vue")
() => import(/* webpackChunkName: "group-about" */ "../views/Login.vue")//把组件按组分块
