vue前端小功能(跳转,传值,缓存等,关闭当前路由页面,跳转页面后刷新)
将登陆用户查询回来的信息缓存下来,全局获取可用
存数据:
sessionStorage.setItem("mobile", res.body.mobile);
取数据:
const mobile = sessionStorage.getetItem("mobile");
页面点击按钮跳转到另一个页面
主页面: <div class="report-item" @click="toOrderBoard(1)"> <p class="item-desc">昨日受理量</p> <p class="item-value" style="color:#EC584D;">{{orderBoardCount.yestodayOrderCount}}</p> </div> methods: { toOrderBoard: function(type){ this.$router.push({path: '/orderBoard', query:{type: type}}); }, } 路由里:router/index.js { //订单看板 path: "/orderBoard", name: "orderBoard", component: () => import ("../views/report/orderBoard.vue"), meta: { title: '订单看板' } }, orderBoard.vue 里 data(){ return { list:[], param: { flag:0, pageIndex: 1, pageSize: 20 }, loadText:'正在加载...', loading: true, // 加载更多中 accountType:'', selected: this.$route.query.type, way:'', } },
主页面按钮跳转到2级页面后
2级路由操作后保存 完 要关闭当前路由页面,并且返回上一个路由页面,并强制刷新页面
// 此步骤是删除当前页面、tagsList 要打断点看看,每个框架可能不一样 this.$store.state.tagsList.splice(this.$store.state.tagsList.findIndex(item => item.path === this.$route.path),1); // 返回一次性促活任务列表并刷新页面 this.goHome(); // 直接用async 和 await 同步做法 methods: { async goHome() { await this.$router.push('/precisePushList') await window.location.reload(); }, }
参考:https://www.csdn.net/tags/MtTaAg3sNTc1NC1ibG9n.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具