vue路由未登录跳转，登录后跳转回原链接

在路由守卫这里做相关的逻辑

关键代码next({ path: '/login', query: { redirect: to.fullPath } })，在跳转到login页面时将路径和参数存到地址栏，登录成功后去拿取对应的参数以及跳转路径

const whiteList = ['/login']
router.beforeEach(async (to, from, next) => {
  const token = getToken()
  if (to.meta.isLogin === false) {
    //不用登陆可以访问的页面
    return next()
  }
  if (!token) {
    // 未登录可以访问白名单页面
    if (whiteList.indexOf(to.path) !== -1) {
      return next()
    } else {
      return next({ path: '/login', query: { redirect: to.fullPath } })
    }
  }

  // 已登录
  if (to.path === '/login') {
    next({ path: '/' })
  } else {
    try {
      await store.dispatch('user/getInfo').then(async ({ code }) => {
        if (code !== 0) {
          await removeToken()
          return next(`/login?redirect=${to.path}`)
        }
        //这里只是判断token是否过期，有效
      })
    } catch (error) {
      console.error('error', error)
      // 移除 token 并跳转登录页
      await removeToken()
      next(`/login?redirect=${to.path}`)
    }
  }

  return next()
})

登录的按钮对应的方法

function handleLogin() {
  loginFormRef.value.validate(async(valid: boolean) => {
    if (valid) {
      state.loading = true;
      await store.dispatch("user/login", state.loginData);
      //登录后重定向到原来的链接和参数
      const redirect = router.currentRoute.value.query.redirect || "/";
      router.push(redirect);
      state.loading = false;
    } else {
      return false;
    }
  });
}