首先, 我们先讲一下这个业务:
就是用户在a页面想去x页面也就是我们的目标页面,但是发现没有权限,让它回到登录页面去做登录.但是登录了以后,页面应该跳到哪里呢? 是让它默认回主页吗? 当然不是,而是跳到用户想去的页面
分析思路:
我们分析一下怎么实现: ? <br /> 1. 首先我们的目标是啥? 我们的目标是去x页面也就是目标页面 <br /> 2.我们想去哪个页面是由地址决定的,比如: 我们啥也不做,让用户回去登录, 它的地址就是 http://.....#/login , 虽然是去登录页面了,但是登录了以后它应该跳到哪里去呢?所以跳到login的时候是不能光跳到login的,还要告诉login如果登录成功了以后我应该去到哪? 所以从x页面目标页面跳回来的时候,地址栏里面应该携带一些参数,,也就是说应该是这样的 : http://...#/login?aaa=要去到的目标页的地址 (当然不是写死的 to的里面有我们要去到的目标页 to.path就是我们要去的地址) 如果有aaa这个参数就跳过去 通过问号的方式,决定用户登录跳转的时候要去哪里,
- 所以在跳到登录也的时候next(‘/login’) 不能光这样跳(也不一定非在路由守卫的next里面跳,在项目二里面我们还在’确定退出?’的这个弹层里面做了这个事情 ),还要补参数 next(‘/login?aaa=123’),但是123这个目标页不能写死了,应该写成next(‘/login?aaa=’ + to.path) 但是我们会这样写: next(‘/login?aaa=’ + to.fullpath) 还会这样写写法1: next(‘/login?aaa=’ +encodeURLComponent( to.fullpath) ) 这个是url特殊符号编码还有在组件里面的另外一种写法就是: 写法2: this.$route.push(
/login?aaa=${this.$route.fullpath}), fullpath属性比path多了查询字符串的参数这样就能写活了,表示假设登录成功要去的位置,
4.登录成功了以后看一下aaa有没有值嘛,那我们怎么去拿aaa的值呢? 通过this.$route.query.aaa ,所以如果登录成功就跳到aaa页面 ,之前是this.$route.push(‘/‘) 直接跳主页去了,但是现在不这么跳了,变成这样跳,如果有aaa就跳到aaa.没有就跳到主页去-> this.$router.push(this.$route.query.aaa || ‘/‘)
总结一下:
** a) 登录成功要去的目标也有两种写法:**<br /> 第一种: **next('/login?aaa=' +encodeURLComponent( to.fullpath) **)<br /> 第二种: **this.$route.push(`/login?aaa=${this.$route.fullpath}`),** 模板字符串拼接<br /> **this.$route.push('/login?aaa=' + this.$route.fullpath) **
b) 登录成以后的写法都是一样的:
this.$router.push(this.$route.query.aaa || ‘/‘)
关键代码:
这个是在项目一里面遇到的: 
这个是在项目二面遇到的 :
** 2. 登录成功: 1. 跳到登录需要携带的参数**<br />
在.vue里面 —— this.$route.fullpath
在js里面 ——— router.currentRoute.fullpath
都表示 用来获取当前页面的地址
若有收获，就点个赞吧
0 人点赞
