ElementUI使用el-tabs进行路由跳转时动态修改页签的标题

需求描述

分析及尝试

效果实现

需求描述

最近在做使用若依的管理系统框架做项目，在做前端的一个需求的时候发现，在路由跳转时，发现的title只能设置为常量，在进行了不少的搜索依旧没找到如何将title值设置为变量的方法，可是当我需要根据点击的不同链接显示成不同的title应该怎么办呢？后来也发现了可以在vue的生命周期中做些文章，主要的思路就是将要显示的title值也作为参数通过路由传过去，再对其进行title的动态修改。下面说说我的实现过程和遇到的问题。

分析及尝试

既然显示的标题是根据路由中的title值决定的，那么在打开的页面修改其中的title值是不是就应该能完成这个需求呢？接下来就开始实现我的想法：

在路由的js中，将跳转过去的路由地址meta中的title删去，否则导航的面包屑会直接取路由中的名称，
在beforeCreate中取到当前路由的title，并设置title为路由地址中传过来的变量

{path: '/data',component: Layout,hidden: true,children: [{path: 'syncData/:myTitle',component: (resolve) => require(['@/views/data/syncData'], resolve),name: 'SyncData',/*将这行代码注释 meta: { title: '固定的标题' } */}]
}

beforeCreate () {this.$route.meta.title = `我的专属名称${this.$route.params.myTitle}`
}

但还是出现了第一次点击跳转后，标签的标题会显示为no-name（仅仅只有面包屑处是显示“我的专属名称”），需要关闭标签后再次打开才会显示为我们传的myTitle变量值。而后使用了chrome的vue开发插件查看发现在修改了this.$route.meta.title后，实际的tabs组件对应的标签页下title还是没有改变，既然是因为tabs组件下的标签页title没变，那我们就只能再手动修改它了。

效果实现

在这之后又想起若依通过vuex将标签组件存放在了Store中，我们可以通过取Store.getters中的tagsView取到组件并修改其下的title变量

/** 当前文件是getters.js */
const getters = {sidebar: state => state.app.sidebar,size: state => state.app.size,device: state => state.app.device,/* tags中是遍历visitedViews进行展示的 */visitedViews: state => state.tagsView.visitedViews,cachedViews: state => state.tagsView.cachedViews,token: state => state.user.token,avatar: state => state.user.avatar,name: state => state.user.name,introduction: state => state.user.introduction,roles: state => state.user.roles,permissions: state => state.user.permissions,permission_routes: state => state.permission.routes
}
export default getters

/** 当前文件是store下的index.js*/
import tagsView from './modules/tagsView'Vue.use(Vuex)const store = new Vuex.Store({modules: {// ... ...// 还有其他代码，此处无关，不列出},getters
})
export default store

最终的程序如下

beforeCreate () {// 可有可无，在面包屑中展示this.$route.meta.title = `我的专属名称${this.$route.params.myTitle}`// 找到当前tab并修改当前tab显示的标题let currentView = this.$store.getters.visitedViews[this.$store.getters.visitedViews.findIndex((item) => item.path === this.$route.path)]if (currentView != null) {currentView.title = `我的专属名称${this.$route.params.myTitle}`}
}

不过依然有美中不足的情况，就是在页面打开后可能会延迟两三秒后才会将title显示为我们最终想显示的值，不过这暂时满足了我们的需求，研究也暂时到这里停止了。如果有更好的方式，希望大家可以留言并纠正我。

才疏学浅，如文中有错误，感谢大家指出。