dynamic-tab-info.md 1.0 KB

动态更新页签

RouterTab 会监听组件 this.routeTab 来动态更新页签信息。您可以通过设置 this.routeTab 来更改页签的标题、图标、提示。

示例:

export default {
  name: 'goods',
  data () {
    return {
      goodsName: '商品名',
      goodsDesc: '商品简介',
      routeTab: null // routeTab 存放在 data 中以支持响应
    }
  },
  mounted () {
    setTimeout(() => {
      let { id } = this.$route.params

      // 只更新页签标题
      this.routeTab = `页面${id}动态标题`

      // 更新多个页签信息
      this.routeTab = {
        title: `商品-${this.goodsName}`,
        icon: 'el-icon-goods',
        tips: this.goodsDesc
      }

      // 国际化页签标题
      this.routeTab = {
        // 以数组方式定义带参数列表的国际化,格式:['i18nKey', ...params]
        title: ['routerTab.goods', this.goodsName]
      }
      
    }, 300)
  }
}