ElementUI使用el-tabs進行路由跳轉時動態修改頁簽的標題

目錄

需求描述

分析及嘗試

效果實現

---

需求描述

最近在做使用若依的管理系統框架做項目，在做前端的一個需求的時候發現，在路由跳轉時，發現的title只能設置為常量，在進行了不少的搜索依舊沒找到如何將title值設置為變量的方法，可是當我需要根據點擊的不同鏈接顯示成不同的title應該怎么辦呢？后來也發現了可以在vue的生命周期中做些文檔，主要的思路就是將要顯示的title值也作為參數通過路由傳過去，再對其進行title的動態修改。下面說說我的實現過程和遇到的問題。

分析及嘗試

既然顯示的標題是根據路由中的title值決定的，那么在打開的頁面修改其中的title值是不是就應該能完成這個需求呢？接下來就開始實現我的想法：

1. 在路由的js中，將跳轉過去的路由地址meta中的title刪去，否則導航的面包屑會直接取路由中的名稱，
2. 在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顯示為我們最終想顯示的值，不過這暫時滿足了我們的需求，研究也暫時到這里停止了。如果有更好的方式，希望大家可以留言並糾正我。

才疏學淺，如文中有錯誤，感謝大家指出。