我司的一個(gè)系統(tǒng)是基于若依進(jìn)行開發(fā)的，業(yè)務(wù)方需要在頁面添加緩存，所以開始研究。
系統(tǒng)的路由大部分由后端生成，小部分由前端配置
后端生成的路由添加緩存比較簡單，直接在配置頁面進(jìn)行配置就可以，如下圖所示：

后端路由配置緩存

系統(tǒng)部分詳情頁面的路由采用前端配置（前端路由默認(rèn)為需要緩存），但是前端路由的頁面緩存并不生效。不生效的代碼如下：

// 前端定義路由
{
    path: 'user',
    component: () => import('@/views/router'),
    meta: {
        title: '用戶',
        icon: 'form'
    },
    children: [
        {
            path: 'detail',
            name: 'userDetail',
            component: () => import('@/views/user/detail'),
            meta: {
                title: '用戶詳情',
                icon: 'form'
            }
        }
    ]
}

// 前端定義路由對應(yīng)頁面示例
<template>
  <div></div>
</template>

<script>
export default {
  name: 'detail'
}
</script>

前端定義路由 緩存不生效的原因是：定義的rou即可ter 的name 和 頁面文件中定義的 name 不一致，把兩者修改為一致，如下：

// 前端定義路由對應(yīng)頁面示例
<template>
  <div></div>
</template>

<script>
export default {
  name: 'userDetail'
}
</script>

業(yè)務(wù)方還想同時(shí)打開詳情頁面，進(jìn)行不同數(shù)據(jù)之間的對比。此時(shí)則需要把從列表頁到詳情頁的跳轉(zhuǎn)方式修改為 name跳轉(zhuǎn) + 動態(tài)params傳參：

// path 跳轉(zhuǎn) + query傳參
this.$router.push({
    path: '/user/detail',
    query: {
        userId: '001',
        age: 18
    }
})

以上路由跳轉(zhuǎn)方式需要修改為 name跳轉(zhuǎn) + 動態(tài)params傳參
// name 跳轉(zhuǎn) + params 動態(tài)傳參
this.$router.push({
    name: 'userDetail',
    params: {
        userId: '001',
        age: 18
    }
})

此時(shí)前端定義路由需修改為：

// /:userId 定義動態(tài)路由
// /:age?  ? 表示 age 參數(shù)可為空
{
    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'
            }
        }
    ]
}

此時(shí)可實(shí)現(xiàn)打開多個(gè)詳情頁簽，但是多個(gè)頁簽會顯示相同的頁簽名稱。在userDetail頁面添加以下代碼可以實(shí)現(xiàn)多個(gè)頁簽顯示不同的名稱：

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}`
    },
}

此外還有個(gè)問題，頁面中有個(gè)信息是通過eventBus傳遞的，如：

// 傳遞信息
eventBus.$emit(EVENT_NAME.SETNAME, this.user.name)
// 接收信息
eventBus.$on(EVENT_NAME.SETNAME, this.setUserName())

此時(shí)打開多個(gè)詳情頁，因?yàn)槎鄠€(gè)詳情頁都是使用的同一個(gè)事件名稱，所以最后打開的詳情頁的userName會把之前打開詳情頁的userName覆蓋掉，如順序打開的詳情頁的人員姓名依次為 張三、李四、王五，但是最后查看時(shí)所有的userName都會顯示為 王五。修改為以下代碼可以規(guī)避此問題

// 傳遞信息
eventBus.$emit(this.user.id + EVENT_NAME.SETNAME, this.user.name)
// 接收信息
eventBus.$on(this.user.id + EVENT_NAME.SETNAME, this.setUserName())