Jeecgboot-vue2 前端动态设置 标签页标题

jeecgboot+ vue2 标签页本来显示的是菜单的名称，要实现在页面里动态改标题。

如图：客户要求，在显示明细页面时，把明细内容标题显示在 标签页上。

实现原理就是利用 vue 的 provide和 inject 实现组件间的通讯。

直接上代码：

1、找到标签组件：src/components/layouts/TabLayout.vue

2、在methods:{里添加updateTitle方法}

 methods:{

        //原有方法省略.... 

         /*zk 添加更新 标签title的方法 */
        updateTitle(title) {
            let page = this.pageList.filter(item => item.fullPath == this.activePage)
            if (page && page[0]) {
                page[0].meta.title = title
            }
        },
        /*zk 添加更新 标签title的方法 END */
  }

看图

 3、provide（）方法里，添加 updateTitle: this.updateTitle,

    provide(){
      return{
          closeCurrent: this.closeCurrent,
          /**20230307 zk 添加更新title的方法 */
          updateTitle: this.updateTitle,
      }
    },

 看图

 4、用法 在页面中添加引入   inject: ['updateTitle']，  调用：this.updateTitle('标题');

export default {
    inject: ['updateTitle'],  //引入更新标题的方法
 
    mounted(){
        //调用改标题
        this.updateTitle("新标题")
    }
}

5、补充一个问题 同一个路由下 会全部更新，这是因为mate.title是引用值类型。

解决办法就是在添加标签时，把meta复制一下。

} else if (this.linkList.indexOf(newRoute.fullPath) < 0) {             
            this.linkList.push(newRoute.fullPath)
            /*20230308 zk 复制一个route对象出来，不能影响原route  */
            let copyRoute = Object.assign({}, newRoute);
            copyRoute.meta = Object.assign({}, copyRoute.meta);
            this.pageList.push(Object.assign({}, copyRoute));
            //this.pageList.push(Object.assign({}, newRoute))
            /*20230308 zk 复制一个route对象出来，不能影响原route  */
} else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {

}