vue实现登录后跳转到之前的页面
在项目开发中客户突然提出这样的一个需求,客户需要在查看某一个页面时,这个页面需要登录才能查看评论或者提交问题,或者…等,需要有权限的才能查看的信息,这时客户会点击登录界面,但是登录后又跳转到刚刚浏览的那个页面,而不是首页,之前设计的是直接登录后,返回到用户中心,面对这种需求,这种问题该如何去做呢?1、router.currentRoute:当前的路由信息对象,我们可以通过router.curren
·
在项目开发中客户突然提出这样的一个需求,客户需要在查看某一个页面时,这个页面需要登录才能查看评论或者提交问题,或者…等,需要有权限的才能查看的信息,这时客户会点击登录界面,但是登录后又跳转到刚刚浏览的那个页面,而不是首页,之前设计的是直接登录后,返回到用户中心,面对这种需求,这种问题该如何去做呢?
1、router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.name获得当前路由的名称。
2、router.replace:作用和router.push相同,不过它不会向history添加新纪录,而是替换当前的history记录。
简单介绍一下解决的思路:
1、首先,我们要把当前的这个路径保存起来,然后在下一步,用户需要登录的时候,直接用这个路由跳转到这个当前的路由就可以。
main.js
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
//保存当前路由
localStorage.setItem("preRoute", router.currentRoute.fullPath)
}
next()
})
登录界面 login.vue
this.$store.dispatch("Login", this.loginForm).then(response => {
if (response.code == 200) {
const curr = localStorage.getItem('preRoute')
if (curr == null) {
this.$router.push({ path: "/user_center" });
} else {
this.$router.push({ path: curr });
}
this.$message({ message: response.msg, type: "success", "duration": 1000 });
} else {
this.$message.error(response.msg);
}
}).catch((response) => {
this.$message.error('请联系管理员!!!');
});
更多推荐
已为社区贡献21条内容
所有评论(0)