# 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

# 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

# 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
Last updated: 9/27/2020, 2:16:26 AM