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

原创已于 2023-03-08 18:34:43 修改 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jeecgBootUi

于 2023-03-07 17:27:41 首次发布

文章介绍了在JeecgBoot+Vue2项目中如何实现标签页标题的动态更新，主要通过Vue的provide和inject进行父子组件间通信，以及在处理路由meta信息时，为避免同一路由下所有标签页标题同步更新的问题，需要复制新的route对象来保持独立性。

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) {

}