Vue项目跳转登录 从哪个页面跳转 回哪个页面
vue 路由守卫
相信很多在做PC端项目的朋友都会遇到一个需求,就是用户在未登录状态从其他页面触发跳转到登录页,当用户登录成功后,再跳回用户原来的页面。
首先,我们来想一下完成这个需求的思路,要跳转那就要有路径,之前我们会在login登录里写登录成功后跳到home首页,那要完成这个需求的话,很显然是不能这样写的,我们都知道,vue给我们一个很好用的东西,叫做路由守卫,就是在路由跳转时,回触发相应的路由守卫。相关代码如下,
在router/index.js写:
//当路由跳转时会触发路由前置守卫
//to:表示到哪里去 from:表示从哪里来 next:表示放行继续往下走
router.beforeEach((to, from, next) => {
//判断如果要跳转到login页面
if (to.path == '/login') {
//将当前的路由路径保存
localStorage.setItem("preRoute", router.currentRoute.fullPath)
}
next()
})
那么此时我们就获取到了路由跳转来的地址
在login页面判断:注意:要判断是否为注册页面跳转 注册页面跳转登录页 不能回跳 跳到home页面
let refer = localStorage.getItem('preRoute')
if (refer != null&&refer!='/register') {
this.$router.push({ path: refer })
return
}
this.$router.push({ path: '/' })
更多推荐
所有评论(0)