我司的一個(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())