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

110 阅读 0 评论 73 点赞

我是靠谱客的博主现代小丸子，最近开发中收集的这篇文章主要介绍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显示为我们最终想显示的值，不过这暂时满足了我们的需求，研究也暂时到这里停止了。如果有更好的方式，希望大家可以留言并纠正我。

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