1. 导航守卫

所谓导航守卫就是我们在跳转路由时，做出相对应响应，使用导航守卫，可以对我们路由具体跳转前，跳转时，跳转后的操作。

全局前置守卫beforeEach

它可以有三个参数，to到达目标path,from哪个path过来,next执行跳转操作。返回值可以是false，取消导航，还可以是路由地址（return '/'）。

后置钩子，afterEach

只有两个参数，因为它是已经导航完成的，就是已经跳过来页面了，是完成之后的。

路由独享的守卫，

对于要使用守卫的那个路由，直接写上beforEnter属性，它只会在路由导航时触发，像是路径参数（path:'/:id'）这些，不会触发。

组件内的守卫

直接向组件可以添加：

beforRouterEnter函数，不能直接获取this，使用next即路由完成导航后，调用回调来访问组件实例

beforRouterUpdate函数，这个在路径参数发生改变时会触发

beforRouterLeave函数，当你跳转到别的路由时会触发

2. 路由元信息

路由元信息：meta属性，我们可以直接在$route.meta获取它的字段，比如说我们有一些组件需要配合登录才可以使用，而一些可以直接查阅，做出这点差异，就可以配合meta。

我们加载页面时，一次性加载完效率低，具体中我们可能只需要打开首页而已，这时候会将其他路由也给加载完毕。这就导致不必要的资源加载。使用路由懒加载，我们在导航某个路由时再加载，俗话说就是需要时再拿。懒加载其实也就语法上有一些改动而已。

例如加载xx组件， import UserDetails from './views/UserDetails'

替换成

const UserDetails = () => import('./views/UserDetails')