Vue路由守卫（全局路由守卫、路由独享守卫、组件内部守卫）

一、全局守卫（两种，在main.js文件下设置）

第一种：router.beforeEach((to,from,next)=>{})

*to：进入到那个路由去

*from:从那个路由来的（上一个路由）

*next：顺延，next()---（放行）---next('/login')---（不放行，让他跳转到login页面）--函数，决定是否展示你要看到的路由页面

第二种：router.afterEach((to,from)=>{})

二、路由独享守卫

beforeEnter((to,from,next)=>{//里边的用法和全局一样})

三、组件内部守卫

所谓路由守卫就是页面跳转时触发的钩子函数，我们称之为路由守卫，vue一共给我们提供了三种路由守卫，分别是全局路由守卫，组件内路由守卫，路由独享守卫，路由独享守卫是写在路由中的，这三种路由守卫都会有beforeEach，beforeResolve，afterEach三个钩子函数，分别表示跳转前，进入的时候，进入路由后触发的钩子函数，这三个钩子函数都有一个回调函数，里面有三个参数，分别为to，from，next分别表示将要进入的路由，离开之前的路由，下一个要进入的路由。

在项目中我们一般使用路由来实现页面的鉴权，比如，当用户登陆之后，我们可以把后台返回的token或者用户的一些信息存入本地存储或vuex中，当用户跳转页面时，我们会在路由中判断本地是否存有token，如果有token则使用next方法让用户跳转到相应的页面，没有则使用next方法让用户返回到登录页

一.全局守卫

1.全局前置守卫

语法:

参数说明:

to ：进入到哪个路由去

from ：从哪个路由离开

next ：函数，决定是否展示你要看到的路由页面。

示例:

main.js 中设置全局守卫

2.全局后置守卫

语法:

参数说明:

二.组件内守卫

1.到达组件时

语法:

说明:

进行访问admin页面，会发现alert输出hello undefined。这是因为，现在访问不到我们的data属性，执行顺序是不一致，这与的声明周期有关。在执行完之前，data数据还未渲染。所以这里，next()会给一个对应的回调，帮助完成。

2.离开组件时

语法:

说明:

三.路由独享守卫

语法:

说明:

---