导航守卫包括全局导航守卫、路由守卫、组件局部守卫
全局导航守卫
在全局导航守卫中，每次路由的跳转他们三个都会被触发
image.png
1..router.beforeEach(...){...}有啥用呢？这里我们可以在里面进行一些数据的校验。比如我们要验证一些页面需要用户登录才能显示，就可以把验证放在里面，再利用next进行页面跳转。
image.png
像这样，比如我要进入'/detail'页面，（如果没有登录的话），先跳转到'/login'页面，如果登录了就直接进入detail页面。注意next可以写一个obj对象，内容可以是和routers一样的东西
image.png
image.png
路由守卫
1.beforeEnter（）{}这个钩子只有在进入这个路由之前才会被调用。只有点击了响应的路由才会被触发。
image.png
组件内部导航守卫
用来确定页面行为的一些钩子。
image.png
注意beforeRouteUpdate(){},如果在类型的路径下显示的是同一个组件的时候，那么第二次的路由他的mouted不会触发，也就是说数据不会更新，如果这种情况一定要使用update，或者使用watch（比较复杂，而且不能控制路由跳转的行为）
访问路由时的执行顺序
全局守卫beforeEach先执行
路由独享守卫beforeEnter执行
组件内守卫beforeRouteEnter执行
全局解析守卫beforeResolve执行
最后全局后置守卫afterEach执行
声明周期钩子函数执行
异步组件
路由在非常多的时候，我们的代码如果一次性通过webpack打包进去会导致js文件非常大，初次加载的时间很长，而且如果我们想访问某一个页面的时候，我们把其他页面的js代码全部加载过来会比较浪费，所以要"通过不同的路由加载对应的代码（和核心的代码）"，而对应页面的代码等到下一次真正访问的时候再加载这样效率更高一点。
