39,084
社区成员
发帖
与我相关
我的任务
分享VUE 中如何切换路由后依然保持页面状态？？？？？？
如图：当我再文本框里输入内容，然后跳转到其他页面，，如何做到我切换回文本框页面，文本框内容依然还保留着。
...全文
请发表友善的回复…
发表回复
码媛小白 2022-04-08
- 打赏
- 举报
您好，最近看到你的帖子。后来你这个是怎么弄的，方便加微信么
我是混子我怕谁 2020-10-17
- 打赏
- 举报
方法一：用v-show做界面隐藏就对了，需要的时候再展示出来
方法二：用js的页面或者本地缓存localstorige，大概是这样拼的，在输入框失去聚焦的时候，将输入框中的内容存入缓存，弹出界面的时候将缓存中的数据读取出来
weixin_50944805 2020-10-16
- 打赏
- 举报
/* 包裹路由, 缓存页面 */
<keep-alive>
<router-view></router-view>
</keep-alive>
码媛小白 2022-04-09
- 举报
您好，最近看到你的帖子。后来你这个是怎么弄的，方便加微信么
Dore_space 2020-10-16
- 打赏
- 举报
const saveQuery = function(app, path){
let routeKey = getRouteKey(path);
if(app.query){
let key = "q_" + routeKey;
setObj(key, app.query);
}
if(app.page){
let key = "page_" + routeKey;
store.set(key, app.page);
}
}
封装个js
Dore_space 2020-10-16
- 打赏
- 举报
beforeRouteLeave (to, from, next){
this.global.saveQuery(this, this.$route.path);
next();
},
左侧是导航菜单，点击后可以打开多个页面，通过标签切换已打开的页面。
但是切换时，Vue路由默认地会重新加载每个路由页面，现在的需求就是想实现保留每个页面的状态，比如输入的文字，不在切换页面时丢失状态。
