左侧菜单页面添加点击事件：让其点开的时候把之前的缓存清空 <template
v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }"
@click="open(item)">
<item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item>
</app-link>
</template>
open(item) {
this.$store.dispatch('tagsView/delCachedView', item)
}
这个是tags的store方法 使用action
delCachedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_CACHED_VIEW', view)
resolve([...state.cachedViews])
})
},
APP.vue页面
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.link" :key="key" />
</keep-alive>
</transition>
<iframe-toggle />
</section>
</template>
1.本身App页面上面代码做缓存的
，但是若依框架后端接口前端动态获取路由信息的，
可以在getRouter这接口打印出看router里面信息，
其中name属性里面的值和每个页面的
name一直，就是可以缓存的。
前面点击左侧mueau然后tagsView缓存了数据，但是每个页面如果需要点击跳转，那么跳转的时候，路由传参然后使用的是query方式传参，导航栏上url拼接了参数都已改变，但是页面没有更新query传参过来的数据，所以要在需要更新的页面，进行router路由监听，如果发生了路由改变就需要重新触发数据 watch: {
$route: {
handler(to, from) {
// 判断当前页面的fullPath是否与上一次相同
// 更新页面数据
if (from) {
if (to.fullPath != from.fullPath) {
this.fetchData(to.query)
// 更新tagsView导航缓存
this.$store.dispatch('tagsView/updateVisitedView',this.$route)
}
}
},
immediate: true
},
},
methods：{
fetchData(query) {
// 根据路由参数query获取最新的数据
// ...
// 更新组件中的数据
this.getDicts("log_type").then((response) => {
this.statusOptions = response.data;
if (query.fxSouceName) {
// 风险总览跳转获取参数 下面是只取括号里面数据
let str = query.fxSouceName
let index1 = str.indexOf('(')
let index2 = str.indexOf(')')
this.queryParams.systemCode = str.substring(index1 + 1, index2)
}
this.getAll()
});
},}
