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://www.elefans.com/dongtai/1729174557a1188553.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。