vue--路由守卫

全局前置路由守卫 beforeEach

在初始化时执行，每次路由切换前执行

三个参数：

to去哪个路由

from来自哪个路由

next 鉴权结束放行

适用场景：路由之的跳转，权限分级

router.beforeEach((to, from, next)=>{

if(to.meta.isAuth){                           //判断当前路由是否需要进行权限控制

if (localStorage.getItem('username')==='susan'){   //具体条件

next();      }                           //允许进入下一路径，放行

else {      alert('无权查看')    }

else {   next(); }   

  })

全局后置路由守卫afterEach

在初始化时执行，每次路由切换后执行

两个参数（没有next）：

to去哪个路由

from来自哪个路由

适用场景：给路由添加title

router.afterEach((to, from)=>{

if (to.meta.title) {

document.title = to.meta.title; }

else {

document.title = 'test'; }

})

独享路由守卫 beforeEnter

配置在路由规则内部，某个路由独享的守卫，可以结合全局后置路由一起使用

beforeEnter (to ,from, next) {

if(to.meta.isAuth){                           //判断当前路由是否需要进行权限控制

if (localStorage.getItem('username')==='susan'){              //具体条件

next();      }                           //允许进入下一路径，放行

else {      alert('无权查看')    }

else {   next(); }   

  })

组件内路由守卫  （分为2种）

可以结合全局后置路由守卫一起使用

beforeRouterEnter

通过路由规则（通过点击跳转路由组件），在进入路由组件时被调用

beforeRouterEnter ((to, from, next) => {

书写组件内部自己的逻辑

})

beforeRouterLeave

通过路由规则（通过点击跳转路由组件），在离开路由组件时调用

beforeRouterLeave ((to, from, next) => {

书写组件内部自己的逻辑

})