Vue路由守卫

2019-11-30  本文已影响0人  前端切图仔

路由守卫作用:和java拦截器相识,不能直接输入地址就能访问

1.跳转页面的时候 在window上加一个值(我写的token)

如图:

window.sessionStorage.setItem("值","里面的value");

vm.$router.push('/home') 为跳转地址

2.路由设置在一起了需要分开

如果路由设置在一起了需要分开

直接绑定发送出去需要分开 分开后,直接给router挂载

3.挂载路由守卫 

//挂载路由守卫

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

  //to表示要访问的地址

  //from代表从哪个路径跳转过来

  //next是一个函数 代表放行  1.next()  2.next('/login')强制跳转

  if(to.path==='/login') return next() //如果是login直接放行 不是就判断

  //获取token

  const tokenStr=window.sessionStorage.getItem('token') 

  if(!tokenStr) return next('/login') //判断是否有token 没有就强制跳转

  next() //有就放行

})

挂载的
上一篇 下一篇

猜你喜欢

热点阅读