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

Posted 2022-01-02 mouseleo

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

来源：网络整理     时间:2017/5/13 0:24:01     关键词:

 

关于网友提出的“ (vue.js)Vue element tab 每个tab用一个路由来管理？
”问题疑问，本网通过在网上对“ (vue.js)Vue element tab 每个tab用一个路由来管理？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

 

问题： (vue.js)Vue element tab 每个tab用一个路由来管理？
描述:

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

---

解决方案1:

有一个问题，就是会导致路由在切换了之后，页面之间输入的内容无法保留，举个例子：
用户在 a.vue 页面的文本框中输入了 123 ,这个时候切换到 b.vue ，再切换回 a.vue ，会发现a.vue 组件输入的123消失了，可以用<keep-alive> 去解决这个问题 ：

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

 

解决方案2:

新建tab点击事件你怎么写的哦?我tab写出来了,事件不知道怎么加,看了下文档说有个Tabs Events事件名称 tab-click结果用不上去..

解决方案3:

一、vue组件

<template>
    <div>
        <p>项目管理</p>
        <el-tabs type="card" v-model="$route.name" @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用一个路由来管理？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/4317914.html