vue.js - Vue element tab 每个tab用一个路由来管理？

问题描述

问 题

每个tab如何用一个路由来管理这个页面。同级路由会出现问题。怎么解决呢？
想要的效果就是点击侧边导航，右边新建tab，但是每个tab想要单独的路由控制跳转，怎么整？

解决方案

一、vue组件

<template>
    <div class="custom-analysis page-wrap-tabs">
        <p class="page-title">项目管理</p>
        <el-tabs type="card" v-model="$route.name" class="tabs-nopadding" @tab-click="onTabClick">
            <el-tab-pane v-for="option in options" label="options.name" :name="options.route"></el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data(){
            return {
            };
        },
        computed: {
            options(){
                return this.$store.state.options;
            }
        }
    };
</script>

二、配置route
提前配置好对应的route到达时渲染的组件
三、激活
在左侧菜单栏组件中点击对应的链接时，动态添加路由，this.$router.push({ path: '***' });并添加到vuex的options选项中，以被用来渲染

这篇关于vue.js - Vue element tab 每个tab用一个路由来管理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！