我司的一个系统是基于若依进行开发的，业务方需要在页面添加缓存，所以开始研究。
系统的路由大部分由后端生成，小部分由前端配置
后端生成的路由添加缓存比较简单，直接在配置页面进行配置就可以，如下图所示：
后端路由配置缓存
系统部分详情页面的路由采用前端配置（前端路由默认为需要缓存），但是前端路由的页面缓存并不生效。不生效的代码如下：
// 前端定义路由
{
path: 'user',
component: () => import('@/views/router'),
meta: {
title: '用户',
icon: 'form'
},
children: [
{
path: 'detail',
name: 'userDetail',
component: () => import('@/views/user/detail'),
meta: {
title: '用户详情',
icon: 'form'
}
}
]
}
// 前端定义路由对应页面示例
<template>
<div></div>
</template>
<script>
export default {
name: 'detail'
}
</script>
前端定义路由 缓存不生效的原因是：定义的rou即可ter 的name 和 页面文件中定义的 name 不一致，把两者修改为一致，如下：
// 前端定义路由对应页面示例
<template>
<div></div>
</template>
<script>
export default {
name: 'userDetail'
}
</script>
业务方还想同时打开详情页面，进行不同数据之间的对比。此时则需要把从列表页到详情页的跳转方式修改为 name跳转 + 动态params传参：
// path 跳转 + query传参
this.$router.push({
path: '/user/detail',
query: {
userId: '001',
age: 18
}
})
以上路由跳转方式需要修改为 name跳转 + 动态params传参
// name 跳转 + params 动态传参
this.$router.push({
name: 'userDetail',
params: {
userId: '001',
age: 18
}
})
此时前端定义路由需修改为：
// /:userId 定义动态路由
// /:age? ? 表示 age 参数可为空
{
path: 'user',
component: () => import('@/views/router'),
meta: {
title: '用户',
icon: 'form'
},
children: [
{
path: 'detail/:userId/:age?',
name: 'userDetail',
component: () => import('@/views/user/detail'),
meta: {
title: '用户详情',
icon: 'form'
}
}
]
}
此时可实现打开多个详情页签，但是多个页签会显示相同的页签名称。在userDetail页面添加以下代码可以实现多个页签显示不同的名称：
created() {
this.setTagsViewTitle()
this.setPageTitle()
},
methods: {
setTagsViewTitle() {
const title = '用户详情'
const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.userId}` })
this.$store.dispatch('tagsView/updateVisitedView', route)
},
setPageTitle() {
const title = '用户详情'
document.title = `${title} - ${this.userId}`
},
}
此外还有个问题，页面中有个信息是通过eventBus传递的，如：
// 传递信息
eventBus.$emit(EVENT_NAME.SETNAME, this.user.name)
// 接收信息
eventBus.$on(EVENT_NAME.SETNAME, this.setUserName())
此时打开多个详情页，因为多个详情页都是使用的同一个事件名称，所以最后打开的详情页的userName会把之前打开详情页的userName覆盖掉，如顺序打开的详情页的人员姓名依次为 张三、李四、王五，但是最后查看时所有的userName都会显示为 王五。修改为以下代码可以规避此问题
// 传递信息
eventBus.$emit(this.user.id + EVENT_NAME.SETNAME, this.user.name)
// 接收信息
eventBus.$on(this.user.id + EVENT_NAME.SETNAME, this.setUserName())
