前端定义路由 缓存不生效的原因是：定义的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都会显示为 王五。修改为以下代码可以规避此问题