vue结合elementUI实现tag多标签页
点击左侧菜单栏,会打开一个相应的tag标签页 点击tag标签可以在不同tag之间切换
如图:
以上图片的布局如下:
<el-container>
<BaseAside />
<el-main>
<el-header>
<AppTag />
</el-header>
<el-main class="el-main-content">
<router-view></router-view>
</el-main>
<el-footer>
<BaseFooter />
</el-footer>
</el-main>
</el-container>
做题思路
- 红框中的tags标签应该是一个数组,每当点击左侧菜单栏时,tags数组中存在当前标签则return,否则push
- 根据当前tags的url与当前页面的$router.path相互比较,相等则添加高亮
- 点击当前tags如果是最后一个标签则路由跳转至上一个,否则路由跳转至下一个
- 点击当前tags跳转至相应的路由
具体描述
左侧菜单栏代码实现:
通过点击左侧菜单栏将当前点击的菜单存储在vuex中
// BaseAside.vue
<template>
<div class="base-aside">
<el-menu
class="el-menu-vertical-demo"
background-color="#fff"
text-color="#666"
active-text-color="#345ACF"
router>
<el-submenu
v-for="(menu, index) in menuData"
:key="index"
:index="index">
<template slot="title">
<i :class="[menu.icon]"></i>
<span>{
{
menu.name}}</span>
</template>
<el-menu-item
v-for="(item, i) in menu.children"
:key="index+'-'+i"
:index="item.url"
@click="clickMenu(item)">
<span>{
{
item.name}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
name: 'base-aside',
data() {