vue3+vite模版框架 tabs右键刷新时丢失路由参数

问题:

标题栏的tabs的右键:刷新时,没有保存上一个页面传递过来的参数

分析:

TagView.vue刷新事件

复制代码
function refreshSelectedTag(view: TagView) {
  console.log('|--执行刷新', view)
  tagsViewStore.delCachedView(view);
  const {fullPath} = view;
  nextTick(() => {
    router.replace({path: "/redirect" + fullPath});
  });
}

刷新获取到当前路由,没有把route里的路由参数对象拿出来,query

解决:

首先添加tag时,把query也添加到tag view里

//src\layout\components\TagsView.vue

function addTags() {

if (route.meta.title) {

tagsViewStore.addView({

name: route.name as string,

title: route.meta.title,

path: route.path,

fullPath: route.fullPath,

affix: route.meta?.affix,

keepAlive: route.meta?.keepAlive,

query: route.query,

});

}

}

执行右键: 【刷新】事件把query拿回来
复制代码
function refreshSelectedTag(view: TagView) {
  console.log('|--执行刷新', view)
  tagsViewStore.delCachedView(view);
  const {fullPath, query} = view;
  nextTick(() => {
    router.replace({path: "/redirect" + fullPath, query});
  });
}
在需要刷新:xx.vue页面

在onActivate地方重置获取一下,再执行刷新事件并请求最新的数据

复制代码
onActivated(() => { //刷新时候保存query
  planInfor.value.id = route.query.id
  getDetailRequest()
})
相关推荐
weixin_431600441 小时前
NestJS 入门(7):生命周期钩子——构造函数和 `OnModuleInit` 差在哪?
前端·后端·学习·node.js·nest.js
cindershade2 小时前
用原生 HTML5 视频与 Canvas 实现浏览器端视频抽帧封面
前端
笨鸟先飞,勤能补拙2 小时前
Web 服务器与计算机网络全景原理
运维·服务器·前端·网络·人工智能·计算机网络·web安全
NutShell Wang2 小时前
Wails v3 Beta 实战:用显式对象模型重写你的第一个 Go 桌面应用
前端·人工智能·go·vibe coding
cindershade2 小时前
前端国际化工程实践:语言包拆分、动态加载与日期数字格式统一
前端
kisbad3 小时前
Day 036|OpenAI Agents SDK 快速开始:今天跑通第一个 Agent
java·前端·javascript
qq_267612893 小时前
Gitee CodePecker行业场景化落地指南:金融、车联网与IoT双引擎选型与工程化路径
前端·gitee·自动化
初晨未凉3 小时前
elementui自定义内容图片预览
前端
无糖可可果4 小时前
从零读懂一个 Next.js 全栈笔记应用
前端
Maxkim4 小时前
DeepSeek Harness 源码深度分析:像 VS Code 一样插件化的 Agent 框架
前端·架构