我司的一个系统是基于若依进行开发的，业务方需要在页面添加缓存，所以开始研究。
系统的路由大部分由后端生成，小部分由前端配置
后端生成的路由添加缓存比较简单，直接在配置页面进行配置就可以，如下图所示：

后端路由配置缓存

系统部分详情页面的路由采用前端配置（前端路由默认为需要缓存），但是前端路由的页面缓存并不生效。不生效的代码如下：

// 前端定义路由
{
    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())