vue实现跳转传参查询

news2024/11/18 5:43:15

vue实现跳转传参查询：

应用场景：外部链接携参跳转目标页时,避免多次输入查询信息查询
目标需求：登录及非登录状态均可跳转自动查询
避坑指南：token失效时需要重新缓存及路由导航缓存判断

简单实现：缓存信息，自动查询。

一，缓存跳转信息。

1，路由拦截器方法中传入name：

handleAuth(code,name, () => {}

2，handleAuth方法中，非登录状态缓存传参信息

//获取token，非登录状态时,非首页或默认页面时记住跳转路径及携参
//handleAuth方法中缓存跳转路径及携参：
export const handleAuth = (code,name,callback) => {
 if(!token){
        if(name!='home'&&name!='rootPath'){
          localStorage.setItem('targetPathName', name);
          let params = new URL(location.href).searchParams;
          let [id] = [params.get('id')];
          if (id != undefined) {
            localStorage.setItem('queryId', id);
          }
        }
  }
}

3.main.vue中，跳转判断。
判断非目标页时跳转首页，导航标签缓存页不存在时也跳目标页,跳转后清除缓存。

 let getPathName=localStorage.getItem('targetPathName');
    let getQueryId=localStorage.getItem('queryId');
    // 跳转页不在标签栏中时跳首页(目标页除外，目标页不在标签栏中时不跳首页)
    if (!this.tagNavList.find(item => item.name === this.$route.name)&&this.$route.name !=='target-page'&&getPathName==null) {
      this.$router.push({
        name: home
      });
    }
    //非首页，携参跳转登录目标页
    if(getPathName!=null) {
      if(getQueryId!=null&&getPathName=='target-page'){
          this.$router.push({
                  name: getPathName,
                  query: {
                    Id:getQueryId
                  }
          });
      localStorage.removeItem('queryId');
       }else{
        this.$router.push({
          name: getPathName
        });
      }
      localStorage.removeItem('targetPathName');
    }

二，token失效时缓存处理：

1，登录状态时,token失效刷新token退出登录时，缓存数据数据丢失，重新再次缓存

export const setTargetInfo = () => {
  let name=window.location.pathname.split("/").slice(-1)
  let params = new URL(location.href).searchParams;
  let [id] = [params.get('id')];
  if(name&&name[0]!=undefined){
    if(name[0]=='target-page'&&id != undefined){
        localStorage.setItem('targetPathName',name[0]);
        localStorage.setItem('queryId', id);
    }
  }
}

2.axios方法拦截中，退出登录前，缓存跳转信息

 if(error.request.status == 401&&!url.includes('api/getToken')){
          return refreshToken().then(res=> {
            //...刷新token处理  
            return instance(config)
          }).catch(err => {
            //token过期时，退出登录前再次缓存上次跳转信息  
            setTargetInfo();
            //退出登录
            logOut();
            return Promise.reject(err)
          }).finally(() => {
            setTargetInfo();
          })
 }

三，目标页自动查询：

   created(){
		let params = new URL(location.href).searchParams;
	    let [id] = [params.get('id')];
	    if (id != undefined) {
	       //获取参数
	    }else{
	       //清空参数
	    } 
	   //查询列表
	   this.getList();   
}

四，效果图

在这里插入图片描述