vue实现登录后跳转到之前的页面

灰太狼 2023-02-16 10:59 4阅读 0赞

在项目开发中客户突然提出这样的一个需求，客户需要在查看某一个页面时，这个页面需要登录才能查看评论或者提交问题，或者…等，需要有权限的才能查看的信息，这时客户会点击登录界面，但是登录后又跳转到刚刚浏览的那个页面，而不是首页，之前设计的是直接登录后，返回到用户中心，面对这种需求，这种问题该如何去做呢？

## 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('请联系管理员！！！');
    });