element admin 中动态设置快捷导航(标签栏导航)meta标签和title标签

因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮，所有就需要手动设置meta标签，标题和内容，这种情况就是我的左侧菜单只有一个，但是我在列表页面打开每一个连接的时候，都是新开一个标签栏导航，标题是自定义的，比如文章详情页这种：

/article/1

/article/2 

那么我们有2中解决方案，下面先看看效果：

 

在同一个菜单里面，新打开多个页面，需要tagView自定义的title，那么有2中解决方案：

1.直接通过router-link 跳转，在跳转的目的页面里面来修改tagView自定义的title

代码如下：

router/index.js的菜单配置如下：

{
    path: '/user',
    component: Layout,
    redirect: 'noRedirect',
    name: 'system',
    meta: {
      title: '系统管理',
      icon: 'icon: el-icon-s-help'
    },
    children: [
      {
        path: 'userlist',
        component: () => import('@/views/user/index'),
        name: 'user',
        meta: { title: '用户管理', noCache: true }
      },
      {
        path: 'orglist',
        component: () => import('@/views/user/org'),
        name: 'organization',
        meta: { title: '组织管理', noCache: true }
      },
      { //需要跳转的页面
        path: '/user/orgDetail/:id(\\d+)',  //路径及携带参数
        component: () => import('@/views/user/orgDetail'),
        name: '组织详情',
        //meta.activeMunu  激活时的菜单
        meta: { title: '组织详情', noCache: true, activeMenu: '/user/orglist' },
        hidden: true   //是否显示在菜单
      },
   ]
}

在我的当前列表页views/user/org，跳转代码如下：

<el-table-column label="状态" min-width="150px">
        <template slot-scope="{row}">
          <router-link :to="'/user/orgDetail/'+row.id">
            <span class="link-type">{
   
   { row.status }}</span>
          </router-link>
        </template>
</el-table-column>

跳转的目的页面views/user/orgDetail里面需要对tagView设置：

代码如下：

<template>
  <div shadow style="height: 100%;width: 100%;overflow:hidden">
    <div class="department-outer">
      hello word
      </div>
    </div>

 

  </div>

</template>

<script>

    import { fetchArticle } from '@/api/org'

    
    export default {
        name: 'orgDetail',
       
        data () {
            return {
                tempRoute: {},
                id: "",
                ViewTitle:""
            }
        },
      
        mounted() {
        },
        created() {
            if (this.$route.params && this.$route.params.id) {
                this.id = this.$route.params && this.$route.params.id
                this.fetchData(this.id)
            }
            this.tempRoute = Object.assign({}, this.$route)
        },
        methods: {
            fetchData(id) {
                fetchArticle(id).then(response => {
                    this.ViewTitle = response.data.domain
                    //设置TagsViewTitle
                    this.setTagsViewTitle()
                    //设置浏览器Title
                    this.setPageTitle()
                }).catch(err => {
                    console.log(err)
                })
            },
            setTagsViewTitle() {
                const title = "组织详情-"+this.ViewTitle
                const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.id}` })
                this.$store.dispatch('tagsView/updateVisitedView', route)
            },
            setPageTitle() {
                const title = this.ViewTitle
                document.title = `${title} - ${this.id}`
            },
        },
    }
</script>

<style></style>

这样跳转到新页面，tagView的title 就可以设置了。

2.直接再跳转的页面通过事件来控制自定义的tagView来设置title

在我的当前列表页views/user/org，添加事件来改变tagView设置title，  代码如下：

<template>
  <div class="app-container">
   ...................  省略其他代码
      <el-table-column label="组织架构" min-width="150px">
        <template slot-scope="{row}">
            <span class="link-type" @click="routerTo(row)">{
   
   { row.domain }}</span>
          </template>
      </el-table-column>
   ...................  省略其他代码

    
  </div>
</template>

<script>
    export default {
        name: 'ComplexTable',
        data() {
            return {
            }

            routerTo(row){  //跳转事件设置tagsView
                console.log(this.$route)
                let path = '/user/orgDetail/'+row.id
                let title = `${this.$route.meta.title}-${row.domain}`
                let route = Object.assign({}, this.$route, {meta:{title}, path})
                this.$store.dispatch('tagsView/addView', route)
                this.$router.push(path)
            }

        }
    }
</script>

以上2种方式都可以在同一个菜单下面，新打开多个页面来设置自定义的tagsViewTitle