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

àì夳堔傛蜴生んèń 2022-10-28 03:57 346阅读 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 条评论，346人围观）

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

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 22 阅读

相关 vue ElementUI 路由跳转新页面

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

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

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

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

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

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

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

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

相关 vue-router实现路由跳转

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

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

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

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

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

相关 Vue实现简单路由跳转

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

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

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 504 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 482 阅读

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

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

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