路由重定向记录

260 阅读1分钟

vue-element-admin重定向分析

有这么一个需求,copy项目的某一个url链接,这时候发现没有登陆,页面来到登陆页面,当你愉快的登陆完之后,发现回到了首页,达咩,我要到刚刚copy的那个地址啊

  1. 地址栏输入 http://localhost:9529/#/example/edit/1 会进入路由守卫,这时候你是未登陆状态,就会来到这里 image.png 会被重定向到login页面,但是后边会加上你刚刚访问的路由 http://localhost:9529/#/login?redirect=/example/edit/1
  2. 看登陆页面 image.png 获取其他参数 image.png
    登陆页面内对路由进行监听,获取redirect后边的路径,通过getOtherQuery获取其他参数,进行存储,输入账号密码,进行跳转,this.$router.push({ path: this.redirect || '/', query: this.otherQuery })就来到你地址栏输入的url
    当然当你你从A页面退出登陆时,也会记录你的路由,当你登陆完之后仍然会进A页面 image.png

还有一个问题就是路由重定向,当你url中输入/redirect/documentation/index时候,或者是TagsView点击刷新时候,我们会发现路由先显示/redirect/documentation/index,马上变成documentation/index,这就用到了动态路由

  1. 当输入/redirect/documentation/index时候,就会匹配path: '/redirect/:path*'这个路径 image.png

  2. 进去到这个页面,拿到路由
    params:{ path: "documentation/index" }
    拿到path路径,拿到query参数
    通过this.$router.replace({ path: '/' + path, query })跳转到'/documentation/index'这个页面,通过render函数进行渲染的,这里选择this.$router.replace()进行跳转,导航后不会留下history记录,即使点击返回按钮也不会回到这个页面 image.png