VUE, Vue Router Tab 显示动态页签名称。

 

<template>
    <router-tab>
        <template #default="tab">
            <div class="title-hack" :title="getMenuInfo(tab, 'title')">
                <i class="angle"></i>
                <span class="tab-title">{{ getMenuInfo(tab, 'title') }}</span>
                <i v-if="tab.closable" class="icon iconfont i-quxiao" @click.prevent="tab.close" />
            </div>
        </template>
    </router-tab>
</template>
<script>
export default {
    name: 'RoutersTab',
    methods: {
        /**
         * @func getMenuInfo
         * @returns
         */
        getMenuInfo(tab) {
            let title = '';
            if (tab.title && tab.title !== '无标题') {
                title = tab.title; // 在需要显示动态标题的页面dat添加routeTab,或者computed 计算属性添加routeTab（推荐）
            } else if (tab.data && tab.data.moduleName) {
                title = tab.data.moduleName;
            }
            return title;
        }
    }
};
</script>

 

 

在需要显示动态名称的页面添加routeTab，可以在data属性中添加，或者computed中添加

computed: {
        routeTab() {
            return this.$route.params.title;
        }
    },

路由配置

{
        path: '/monthly-evaluation-socretask-detail/:id/:title',
        name: 'MonthlyEvaluationScoreTaskDetail',
        component: MonthlyEvaluationScoreTaskDetail,
        meta: {
            moduleName: '月度考评评分详情',
            key: 'fullPath'
        }
    },

调用

openDetail(item) {
            let path = `/monthly-evaluation-socretask-detail/${item.id}/${item.title}`;
            this.$router.push(path);
        }