vue3:十、页面跳转，根据参数跳转回原访问页面

目的：如果用户在访问某个需要登录的页面时，但是某些信息不存在时（例如token），根据路由守卫的设定，就会跳转到登录页面，但如果在访问页面增加参数redirect=路径值，就可以当用户成功登录时，根据redirect跳转以及当前页面的参数，重新回到刚才访问的页面

一、守卫跳转路径：更换跳转方式

主要对路由守卫后的路径跳转为拼接跳转，携带参数redirect=路径值

路由守卫参考：vue3:九、路由守卫-CSDN博客

路由守卫，这里我采用的都是官方提供的跳转方式：next({ name: 'login' })，现将其转换为拼接路径，就可以标识参数，表明我是从什么页面跳转过来的

1、初始路由守卫

由下代码可知，路径跳转都是采用next({name:'跳转的路径的name值'})进行跳转

//设置系统标题
const SystemTitle = 'SMS后台管理系统';
//设置一个不需要进行登录的页面数组
const NoLogin = ['login', 'not-found', 'test']
//设置路由守卫
router.beforeEach(async(to, from, next) => {
  if (to.meta.title) {
    //拼接新标题
    var newtitle = to.meta.title + '-' + SystemTitle
    document.title = newtitle
  }
  // 判断是否登录
  const token = getToken();
  //如果token不存在
  if (!token) {
    //在NoLogin数组中，表示不需要登录，就直接放行
    if (NoLogin.includes(to.name)) {
      next()
    }
    //如果不在NoLogin数组中，就表示需要登录，没有token就跳转到登录页面
    else {
      next({ name: 'login' })
    }
  }
  //token存在
  else {
    //如果在登录页面，就跳转到首页
    if (to.name == 'login') {
      next({ name: 'main' })
    }
    else {
      //读取用户信息
      const userstore = userStore();
      console.log(userstore)
      if (userstore.username) {
        //放行
        next();
      }
      else {
        //如果token存在，用户信息没查询到就去请求用户信息
        var res = await getuserinfo();
        console.log(res);
        //请求之后，如果请求成功，就设置token，设置用户信息，放行，如果请求失败，就删除token，跳转到登录页面
        if(res.code == 1){
          //设置token和用户信息
          setToken(res.token);
          //将用户信息设置到store中
          userstore.setUserinfo(res.data)
          //放行
          next();
        }
        else{
          //删除token
          delToken();
          //跳转到登录页面
          next({ name: 'login' })
        }
      }
    }
  }
})

2、将原始跳转更改为拼接路径

①路由页面使用拼接路径

可以采用这种方式拼接，跳转到/login页面，并且携带参数redirect，其值为当前的to.path路径信息

next(`/login?redirect=${to.path}`)

②完整代码

//设置系统标题
const SystemTitle = 'SMS后台管理系统';
//设置一个不需要进行登录的页面数组
const NoLogin = ['login', 'not-found', 'test']
//设置路由守卫
router.beforeEach(async(to, from, next) => {
  if (to.meta.title) {
    //拼接新标题
    var newtitle = to.meta.title + '-' + SystemTitle
    document.title = newtitle
  }
  // 判断是否登录
  const token = getToken();
  //如果token不存在
  if (!token) {
    //在NoLogin数组中，表示不需要登录，就直接放行
    if (NoLogin.includes(to.name)) {
      next()
    }
    //如果不在NoLogin数组中，就表示需要登录，没有token就跳转到登录页面
    else {
      // next({ name: 'login' })
      next(`/login?redirect=${to.path}`)
    }
  }
  //token存在
  else {
    //如果在登录页面，就跳转到首页
    if (to.name == 'login') {
      // next({ name: 'main' })
      next('/')
    }
    else {
      //读取用户信息
      const userstore = userStore();
      console.log(userstore)
      if (userstore.username) {
        //放行
        next();
      }
      else {
        //如果token存在，用户信息没查询到就去请求用户信息
        var res = await getuserinfo();
        console.log(res);
        //请求之后&#