首页 > 其他 > 详细

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

时间:2021-06-08 21:39:08      阅读:43      评论:0      收藏:0      [点我收藏+]

 

<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);
        }

 

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

原文:https://www.cnblogs.com/m7777/p/14864079.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!