element-admin中动态改变复用组件的title

背景

最近接到一个任务是做几个汇总报表的前端界面,看了一下原型,结构都差不多,所以就写成了一个组件,根据不同的汇总报表,传不同的参数来区分,任务并不复杂,然后刷刷的很快就完成了,但是事情并没有结束!

问题描述

很快问题就暴露出来了,就是所有的汇总报表的title都是用的同一个组件的组件的,所以所有的汇总报表的名称都是一样的,无法区分是哪个汇总报表,效果是这样的

关键路由代码

1
2
3
4
5
6
{
path: '/tcReport/:orderType/:type',
component: () => import('@/views/tc/tcReport/tcReportList'),
name: 'tcReportList',
meta: { title: '汇总报表', icon: 'guide', noCache: false }
}

这可咋办啊,咱得解决这个问题啊

解决方案

利用 Vue Router 的 全局前置守卫 router.beforeEach 在路由跳转之前可以根据 to 路由对象的 path 判断要跳转的汇总报表, 再对该路由对象的 metatitle 作相应的修改可以到达目的.(可参考Vue Router 的前置守卫)

添加的关键代码如下 router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
veuRouter.beforeEach((to, from, next) => {
if (/汇总报表/.test(to.meta.title)) {
let tagList = [
{
link: '/tcReport/SALES/OUT',
name: '销售出库'
},
{
link: '/tcReport/SALES/INVOICE',
name: '销售发票'
},
{
link: '/tcReport/SALES/RECEIPT',
name: '销售收款'
},
{
link: '/tcReport/PURCHASE/IN',
name: '采购入库'
},
{
link: '/tcReport/PURCHASE/INVOICE',
name: '采购发票'
},
{
link: '/tcReport/PURCHASE/PAY',
name: '采购付款'
}
]
let obj = tagList.find(item => {
return item.link === to.path
})
if (obj) {
to.meta.title = obj.name + '汇总报表'
}
} else {
next()
}
})

解决后的效果