vue-element-admin框架动态路由匹配时动态设置meta里的title

使用框架：vue-element-admin

需求场景：有两个菜单页面都是表格，而且内容基本相似。避免代码冗余在router.js使用动态路由匹配，通过$route.params.type字段来判断显示，并且面包屑和标签栏显示对应的title。

1、首先，动态路由匹配很简单，写上：

{

        path: "content-monitor/:type",

        name: "content-monitor",

        component: _import("...省略.../contentMonitor")

 }

访问/content-monitor/list就是内容监测列表页面，访问/content-monitor/result就是内容监测结果页面。

2、由于这里的标签栏和面包屑都是读取的$route.meta.title字段，简单地想到，那就在vue文件里通过判断$route.params.type来修改this.$route.meta.title呗！

BUT！试过后发现，点到/content-monitor/list后，两个标签都变成了内容监测；点到/content-monitor/result，都变成了内容监测结果。并且这种改动还不是及时刷新。看来改动发生到了同一个对象上。不可行。

3、于是，在动态路由处将title设置为一个函数：

{
        path: "content-monitor/:type",
        name: "content-monitor",
        component: _import("....省略..../contentMonitor"),
        meta: {
          title: params => {return params.type === 'list' ? '内容监测' : '内容监测结果'}
        }
 }

4、找到标签栏所在文件tagViews.vue

将原来的{{tag.meta.title}}改成：

<span v-if="tag.meta.title && typeof tag.meta.title === 'function'">{{ tag.meta.title(tag.params)}}</span>
<span v-else>{{tag.meta.title}}</span>

5、面包屑组件是通过$route.matched获取的，对象中没有可以判断:type的属性，但面包屑是全局唯一显示的，所以可以将当前$route传入获取title。

同理将原来的{{item.meta.title}}改成：

<span v-if="item.meta.title && typeof item.meta.title === 'function'">{{ item.meta.title($route.params)}}</span>
<span v-else>{{item.meta.title}}</span>

这样，就可以实现我们的需求目的了。