vue退出登录后路由重定向

场景：在某个页面，退出登录/token失效到期，返回至login页面，登录后需重新返回该页面。

实现步骤:

1. 路由守卫
2. login页面

步骤1：路由守卫部分

router.beforeEach((to, from, next) => {
  if (getToken()) { // getToken用于获取token
      // 有token处理
      ...
  } else {
      // 无token处理，跳转到login界面
    next(`/login?redirect=${to.fullPath}`) 
  }
})

说明：其中to.fullpath为需要返回的页面的完整path（包含query部分），例如：'/detail?id=af334naf9ff'。

注意：其中fullPath会被自动编码。

步骤2：login部分

import api from '@/api'
export default {
   data(){
      redirect: ''
   },
   watch: {
    $route: {
      handler: function(route) {
        // 需要进行解码
        let redirectPath = decodeURIComponent(route.fullPath).split('redirect=')[1]
        this.redirect = redirectPath
      },
      immediate: true
    }
  },
  methods: {
    login() {
        // 登录接口
        api.login().then(() => {
           // 登录接口成功之后的跳转
           this.$router.push(this.redirect || '/')
        })
    }
  }
}

说明：注意fullPath需要解码，decodeURIComponent为js自带的url解码方法。