动态title在路由里配置，meta.title改成一个回调函数，参数是当前路由，返回一个在面包屑和标签栏显示的字符串

Author: [email protected]

src/components/main/main.vue

@@ -136,7 +136,7 @@ export default {
         route: { name, query, params, meta },
         type: 'push'
       })
-      this.setBreadCrumb(newRoute.matched)
+      this.setBreadCrumb(newRoute)
       this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
       this.$refs.sideMenu.updateOpenName(newRoute.name)
     }
@@ -149,7 +149,7 @@ export default {
     this.addTag({
       route: this.$store.state.app.homeRoute
     })
-    this.setBreadCrumb(this.$route.matched)
+    this.setBreadCrumb(this.$route)
     // 设置初始语言
     this.setLocal(this.$i18n.locale)
     // 文档提示

src/libs/util.js

@@ -52,14 +52,17 @@ export const getMenuByRouter = (list, access) => {
  * @param {Array} routeMetched 当前路由metched
  * @returns {Array}
  */
-export const getBreadCrumbList = (routeMetched, homeRoute) => {
+export const getBreadCrumbList = (route, homeRoute) => {
+  let routeMetched = route.matched
   let res = routeMetched.filter(item => {
     return item.meta === undefined || !item.meta.hide
   }).map(item => {
+    let meta = {...item.meta}
+    if (meta.title && typeof meta.title === 'function') meta.title = meta.title(route)
     let obj = {
       icon: (item.meta && item.meta.icon) || '',
       name: item.name,
-      meta: item.meta
+      meta: meta
     }
     return obj
   })
@@ -69,6 +72,14 @@ export const getBreadCrumbList = (routeMetched, homeRoute) => {
   return [Object.assign(homeRoute, { to: homeRoute.path }), ...res]
 }
 
+export const getRouteTitleHandled = route => {
+  let router = {...route}
+  let meta = {...route.meta}
+  if (meta.title && typeof meta.title === 'function') meta.title = meta.title(router)
+  router.meta = meta
+  return router
+}
+
 export const showTitle = (item, vm) => vm.$config.useI18n ? vm.$t(item.name) : ((item.meta && item.meta.title) || item.name)
 
 /**

src/router/routers.js

@@ -304,7 +304,7 @@ export default [
         name: 'params',
         meta: {
           icon: 'md-flower',
-          title: '动态路由',
+          title: route => `动态路由-${route.params.id}`,
           notCache: true,
           beforeCloseName: 'before_close_normal'
         },
@@ -315,7 +315,7 @@ export default [
         name: 'query',
         meta: {
           icon: 'md-flower',
-          title: '带参路由',
+          title: route => `带参路由-${route.query.id}`,
           notCache: true
         },
         component: () => import('@/view/argu-page/query.vue')

src/store/module/app.js

@@ -6,7 +6,8 @@ import {
   getHomeRoute,
   getNextRoute,
   routeHasExist,
-  routeEqual
+  routeEqual,
+  getRouteTitleHandled
 } from '@/libs/util'
 import beforeClose from '@/router/before-close'
 import router from '@/router'
@@ -31,8 +32,8 @@ export default {
     menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access)
   },
   mutations: {
-    setBreadCrumb (state, routeMetched) {
-      state.breadCrumbList = getBreadCrumbList(routeMetched, state.homeRoute)
+    setBreadCrumb (state, route) {
+      state.breadCrumbList = getBreadCrumbList(route, state.homeRoute)
     },
     setTagNavList (state, list) {
       if (list) {
@@ -55,11 +56,12 @@ export default {
       }
     },
     addTag (state, { route, type = 'unshift' }) {
-      if (!routeHasExist(state.tagNavList, route)) {
-        if (type === 'push') state.tagNavList.push(route)
+      let router = getRouteTitleHandled(route)
+      if (!routeHasExist(state.tagNavList, router)) {
+        if (type === 'push') state.tagNavList.push(router)
         else {
-          if (route.name === 'home') state.tagNavList.unshift(route)
-          else state.tagNavList.splice(1, 0, route)
+          if (router.name === 'home') state.tagNavList.unshift(router)
+          else state.tagNavList.splice(1, 0, router)
         }
         setTagNavListInLocalstorage([...state.tagNavList])
       }