vue - 菜单栏联动选项卡

在 vue 环境下，制作一个与菜单联动的选项卡（el-tabs）。

能看到这个文章，大体是有自己动手的打算了，这里给一下关键思路。

关键点

路由的设计

传统的选项卡设计，一般通过 iframe 实现，在 vue 环境中，则是使用 router-view。

问题是，一个界面上，同时存在多个 router-view（如果不做标记），内容是完全一致的，

所以，我们要设计好逻辑，每次只显示一个 router-view。

做法倒是比想得简单，就是通过 v-if 控制，只保留一个 router-view。

页面缓存

传统的选项卡设计，一般是通过显示、隐藏实现的，切换回之前的界面，数据会保存在界面上。

通过 v-if 控制显示隐藏，不会有缓存效果的，这时候，就要用到 keep-alive 标签，keep-alive 会帮助我们缓存之前的数据。

路由侦听

路由的封装方式有很多，我个人推荐的做法是，通过 watch 侦听路由的变化。

这样做有什么好处？除了界面上的按钮点击事件，浏览器返回按钮、history-back 等等，都会引起的路由变化，直接 watch 是最直接的方式。

路由参数

路由是有可能带参数的，因此需要注意浏览器刷新等特殊情况，因此要注意保留参数；

比较粗暴的解决方案，就是刷新完，直接清空选项卡，虽然会觉得不合常理，但是一般也能接受。

代码样例

这里就给个简单的案例，体验一下效果，相信能受到启发，画出自己想要的效果。

<template>
	 <el-main ref="main" v-if="panelHeight" :style="panelHeight" class="main-container">
	  <el-input v-model="val"></el-input>
	  <!--中央控制面板-->
	  <el-row>
		<el-col :span="12">
		  <span>panel 1</span>
		  <keep-alive>
			<router-view v-if="val === '1'"/>
		  </keep-alive>
		</el-col>
		<el-col :span="12">
		  <span>panel 2</span>
		  <keep-alive>
			<router-view v-if="val === '2'"/>
		  </keep-alive>
		</el-col>
	  </el-row>
	</el-main>
</template>
<script>

/**
 * 首页
 */
export default {
    components: {
    },
    name: "home",
    watch: {
        $route: {
            /**
             * 侦听路由变化，更新选项卡数据
             */
            handler(val) {
                if (val.path !== 'ignore' && val.path !== '/') {
                    // todo sth.
                }
            }
            , immediate: true
            , deep: false
        }
    },
    data() {
        return {     
            val: '1'
        };
    }
}
</script>