物流网站功能,设计师招聘网站有哪些,镇江微信推广平台,网站建设可以自己建设服务器吗vue实现跳转传参查询#xff1a; 应用场景#xff1a;外部链接携参跳转目标页时,避免多次输入查询信息查询 目标需求#xff1a;登录及非登录状态均可跳转自动查询 避坑指南#xff1a;token失效时需要重新缓存及路由导航缓存判断 简单实现#xff1a;缓存信息#xff0c…vue实现跳转传参查询 应用场景外部链接携参跳转目标页时,避免多次输入查询信息查询 目标需求登录及非登录状态均可跳转自动查询 避坑指南token失效时需要重新缓存及路由导航缓存判断 简单实现缓存信息自动查询。
一缓存跳转信息。
1路由拦截器方法中传入name
handleAuth(code,name, () {}2handleAuth方法中 非登录状态缓存传参信息
//获取token非登录状态时,非首页或默认页面时记住跳转路径及携参
//handleAuth方法中缓存跳转路径及携参
export const handleAuth (code,name,callback) {if(!token){if(name!homename!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 getPathNamelocalStorage.getItem(targetPathName);let getQueryIdlocalStorage.getItem(queryId);// 跳转页不在标签栏中时跳首页(目标页除外目标页不在标签栏中时不跳首页)if (!this.tagNavList.find(item item.name this.$route.name)this.$route.name !target-pagegetPathNamenull) {this.$router.push({name: home});}//非首页携参跳转登录目标页if(getPathName!null) {if(getQueryId!nullgetPathNametarget-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 namewindow.location.pathname.split(/).slice(-1)let params new URL(location.href).searchParams;let [id] [params.get(id)];if(namename[0]!undefined){if(name[0]target-pageid ! 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();
}四效果图 更多精彩
1.vueiView 实现可输入的下拉框添加链接描述 2.实现搜索的历史记录功能(浏览器记录) 3.路由传值实现分类搜索 4.调用第三方接口跨域问题
5.vueiView 权限实践之动态显示侧边栏菜单 6.vueiView 跳转子菜单父级菜单保持高亮 7.vueiView 树形菜单回显与选中
8.vueiView 实现导入与导出excel功能 9.vueiView table分页勾选记忆功能
喜欢就多多点赞关注。
