vue-element-admin重定向分析
有这么一个需求,copy项目的某一个url链接,这时候发现没有登陆,页面来到登陆页面,当你愉快的登陆完之后,发现回到了首页,达咩,我要到刚刚copy的那个地址啊
- 地址栏输入 http://localhost:9529/#/example/edit/1 会进入路由守卫,这时候你是未登陆状态,就会来到这里
会被重定向到login页面,但是后边会加上你刚刚访问的路由 http://localhost:9529/#/login?redirect=/example/edit/1
- 看登陆页面
获取其他参数
登陆页面内对路由进行监听,获取redirect后边的路径,通过getOtherQuery获取其他参数,进行存储,输入账号密码,进行跳转,this.$router.push({ path: this.redirect || '/', query: this.otherQuery })就来到你地址栏输入的url
当然当你你从A页面退出登陆时,也会记录你的路由,当你登陆完之后仍然会进A页面
还有一个问题就是路由重定向,当你url中输入/redirect/documentation/index时候,或者是TagsView点击刷新时候,我们会发现路由先显示/redirect/documentation/index,马上变成documentation/index,这就用到了动态路由
-
当输入/redirect/documentation/index时候,就会匹配path: '/redirect/:path*'这个路径
-
进去到这个页面,拿到路由
params:{ path: "documentation/index" }
拿到path路径,拿到query参数
通过this.$router.replace({ path: '/' + path, query })跳转到'/documentation/index'这个页面,通过render函数进行渲染的,这里选择this.$router.replace()进行跳转,导航后不会留下history记录,即使点击返回按钮也不会回到这个页面