admin管理员组文章数量:1633739
今天遇到一个bug,记录下来:项目中存在多个记录页面,每个记录页面实际上用的是同一个.vue页面,只不过通过不同的入口进入,每次进入url处的formtype值(自定义页面标识)都不一,而且,页面的列表部分调用不同的接口去拿数据,在给某个页面上了缓存以后,每个记录页面互相点击转换的过程中会拿到固定页面的缓存记录,所以我们要修改为:记录与记录之间互相转换的过程中,根据formtype的值的不同而调用后台接口拿数据,而且,在这个过程中,页面公用的部分也得回到初始化(比如所有的input搜索框),另外还得让缓存不影响:
以下附带keepAlive配置做对比
1.配置store.js:
export default {
state: {
keepAlive: [],
currentFormtype: ''
},
getters: {
keepAlive: state => state.keepAlive,
currentFormtype: state => state.currentFormtype
},
mutations: {
SET_KEEP_ALIVE: (state, keepAlive) => {
state.keepAlive = keepAlive
},
steFormtype(state, currentFormtype) {
state.currentFormtype = currentFormtype;
}
}
}
2.公用的.vue页面
watch: {
$route() {
this.formType = this.$route.query.formType; //表单类型
},
formType() {
//上一次页面的formType
let formtype = this.$store.getters.currentFormtype;
//如果不等undefined且 与上一个记录页面不同(即formType不同),才进行清空、请求
if (this.formType !== undefined && formtype !== this.formType) {
this.handleClear(); //清空input并调用内部写好的方法load()拿数据
}
}
},
methods: {
......
handleClear() {
...... //input清空步骤
this.load();
},
......,
async load() {
......
this.$store.commit('setFormType',this.formType); //保存当前页面的formtype
......
}
}
可能写的有点草率
版权声明:本文标题:vue关于多个路由入口进入同一页面,列表部分取不同数据而互相跳转的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729174557a1188553.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论