vue路由拦截

vue路由拦截

首先路由拦截分为三种

1.全局路由守卫

全局路由守卫分为两个

前置路由守卫 router.beforeEach((to,from,next)=>{})
后置路由后卫router.afterEach((to,from,next)=>{})

概念:

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查

2.路由独享守卫

beforeEnter(to,from,index)

概念:

路由独享守卫是在路由配置页面单独给路由配置的一个守卫(谁需要就配给谁)

3.组件路由守卫

组件路由守卫有三种分别是
beforeRouteEnter (to, from, next) 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此新组件还没被创建。
beforeRouteUpdate (to, from, next) 同一页面，刷新不同数据时调用，
beforeRouteLeave (to, from, next)离开当前路由页面时调用

概念:

组件路由守卫是指在组件内执行的钩子函数，类似于组件中的methods方法

使用场景:
我个人使用的比较多的有全局路由守卫,和路由独享守卫
1.全局路由守卫通常用在后台管理项目上
如果判断vuex里没有token的话 跳转到login页面 直到vuex里有保存的token在放行
2.路由独享守卫 通常用在移动端购物商城上
如果没有登录的话进入购物车页面会判断是否有token有的话放行,没有弹出对话框提示去注册或登录