zoukankan      html  css  js  c++  java
  • 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);
            }
  • 相关阅读:
    linux 网络相关
    工作随笔
    python
    trouble-shooting
    MySQL常见问题总结
    根据 Request 获取客户端 IP
    文件上传按钮优化
    Linux中RabbitMQ安装
    linux 完全卸载MySQL
    Linux 下安装 MySQL-5.7.24
  • 原文地址:https://www.cnblogs.com/m7777/p/14864079.html
Copyright © 2011-2022 走看看