vue实现跳转传参查询

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();   
}

四，效果图

在这里插入图片描述