# Dynamic Update
RouterTab will listen to the component this.routeTab to dynamically update the tab info. You can change the title, icon, and tips of the tab by setting this.routeTab.
# Computed (recommend)
Example:
export default {
name: 'GoodsDetail',
data() {
return {
goods: {
goodsName: 'Goods name',
goodsDesc: 'Goods description'
}
}
},
computed: {
// update tab info by computed property
routeTab() {
// 1. Only update tab title
return `Goods-${this.goods.goodsName}`
// 2. Update tab info
return {
title: `Goods-${this.goods.goodsName}`,
icon: 'el-icon-goods',
tips: this.goods.goodsDesc
}
// 3. International tab title
return {
// Define the internationalization with parameter list as an array, the format: ['i18nKey', ...params]
title: ['routerTab.goods', this.goods.goodsName]
}
}
}
}
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
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
# Data
Example:
export default {
name: 'GoodsDetail',
data() {
return {
goods: {
goodsName: 'Goods name',
goodsDesc: 'Goods description'
},
routeTab: null // routeTab store data for response
}
},
mounted() {
setTimeout(() => {
// Update tab info
this.routeTab = {
title: `Goods-${this.goodsName}`,
icon: 'el-icon-goods',
tips: this.goods.goodsDesc
}
}, 300)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Route.meta
Example:
const route = {
path: '/my-page/:id',
component: MyPage,
meta: {
title: route => `Page ${route.params.id}`
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7