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


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



 

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

描述:

每个tab如何用一个路由来管理这个页面。同级路由会出现问题。怎么解决呢?

想要的效果就是点击侧边导航,右边新建tab,但是每个tab想要单独的路由控制跳转,怎么整?

(vue.js)Vue element 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用一个路由来管理?”的问题解答,希望对有需要的网友有所帮助。