Vue路由实现登录后跳转回原访问页面

àì夳堔傛蜴生んèń 2022-10-28 03:57 365阅读 0赞

## 官方文档 ##

[导航守卫][Link 1]

## 解决思路 ##

> 检测到没有权限时，把当前页面的路由及参数带给登陆页，登陆成功后，再跳回传过来的路由地址

## router.currentRoute: ##

当前的路由信息对象，我们可以通过`router.currentRoute.fullPath`获得解析后的 URL，包含查询参数和 hash 的完整路径，如果要访问的页面的路由有命名（name）的话，可以通过`router.currentRoute.name获得当前路由的名称`。  
路由页面代码：

//导航守卫（点击登录后，返回上一页面）
    Router.beforeEach((to, from, next) => {
    //登录页
      if (to.path == '/loginCompany') {
        //保存当前路由
        localStorage.setItem("preRoute", Router.currentRoute.fullPath)
      }
      next()
    })

登录页判断

this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
    // 登录成功后  判断
     if (Object.keys(this.userInfo).length > 0) {
     // 如果直接进入登录页，无上一页面 默认跳转首页 存在上一页面，则返回上一页面
    	let lastPath = '/index'
    	if (Object.keys(this.userInfo).length > 0) {
    	  let curr = localStorage.getItem('preRoute')
    		  if (curr && curr != '/loginCompany' && curr != '/') {
    		    lastPath = curr
    		  }
    	}
    	this.$router.push({
    	  path: lastPath
    	});
    	}
    });

[Link 1]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue基础】Vue路由，实现页面跳转

一、需求说明点击不同的模块实现页面跳转，如下点击“员工管理”右侧会显示员工管理页面，如下图1；点击“入住信息”右侧会显示入住信息，如下图二 ![7cf2eb2df4a64

偏执的太偏执、/ 2023年10月11日 22:04/ 0 赞/ 77 阅读

相关 Vue项目启动后跳转到制定路由页面

前言今天把自己的项目布局完成了，但是想在项目启动的时候默认跳转到登录页面。 > 这其实需要借助路由实现跳转开始编写之前，大家可以看下我的布局： ![在这里插入图

灰太狼/ 2023年09月23日 23:10/ 0 赞/ 120 阅读

相关 1.Vue之路由页面跳转

demo地址:链接：https://pan.baidu.com/s/1eWmQElwK0AYskR6O5Ith-A 提取码：zsq6 1.功能,根据点击实现页面底

淡淡的烟草味﹌/ 2023年03月01日 13:27/ 0 赞/ 14 阅读

相关 vue ElementUI 路由跳转新页面

页面效果从产品成本核算配置管理Tab页跳转核算配置信息Tab页 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

淡淡的烟草味﹌/ 2022年12月15日 03:44/ 0 赞/ 485 阅读

相关 Vue路由实现登录后跳转回原访问页面

官方文档 [导航守卫][Link 1] 解决思路 > 检测到没有权限时，把当前页面的路由及参数带给登陆页，登陆成功后，再跳回传过来的路由地址 router.c

àì夳堔傛蜴生んèń/ 2022年10月28日 03:57/ 0 赞/ 366 阅读

相关 Vue路由跳转页面后-新页面没有位于顶部-案例

> 页面通过路由调转后，新页面停留的位置与上一级页面一致解决 > 配置路由 const router = new VueRouter({ s

今天药忘吃喽~/ 2022年09月07日 12:20/ 0 赞/ 213 阅读

相关 vue-router实现路由跳转

用了一个多月的vue了，发现路由跳转的方式还挺多，现在上干货： 1.返回上个页面(不带参数) this.$router.go(-1); 2.指定跳转的地址(不带参

港控/mmm°/ 2022年05月17日 21:26/ 0 赞/ 381 阅读

相关 vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)

1:在main.js(我是在app.js里面写的)全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面: router.b

左手的ㄟ右手/ 2022年03月10日 13:07/ 0 赞/ 1862 阅读

相关 Vue实现简单路由跳转

1. 新建一个项目 -------------------- 2. 在components中新建一个文件这里是test1.vue，内容如下 ----------

拼搏现实的明天。/ 2022年01月11日 05:25/ 0 赞/ 361 阅读

相关 vue - 路由跳转新页面后回到顶部

前言 vue路由跳转新页面，如果有滚动条的话，会保持和原来位置回到顶部解决方法 1、全局设置路由跳转回到顶部，router.js中 route

绝地灬酷狼/ 2021年07月26日 18:22/ 1 赞/ 1026 阅读