vue+element路由标签使用tag动态显示隐藏以及跳转实现(使用vuex)

效果图：

点击tab可以跳转到导航对应页面。

代码：

<store>
state:{
	currentMenu:null,
	menu:[],
	tabsList:[
		{
			path:'/',
			name:'首页',
			icon:'home'
		}
	]
},
mutations:{
//选择标签
	selectMenu(state,val){
		if(val.path === '/'){
			this.currentMenu = null;
		} else {
			state.currentMenu = val;
			let resp = state.tabsList.findIndex(item => item.name === val.name);
			if(resp === -1){
				state.tabsList.push(val);
			}
		}
	},
	closeTab(state,val){
		let resp = state.tabsList.findIndex(item => item.name === val.name);
		state.tabsList.splice(resp, 1);
	},
	setMenu(state,val){
		state.menu = val;
		sessionStorage.
	}，
	addMenu(state, router) {
            let getsesions: any = sessionStorage.getItem('menu');
            if (!getsesions) {
                return;
            }
            let menu = JSON.parse(getsesions);
            state.menu = menu;
            let currentMenu: any = [
                {
                    path: '/',
                    component: () => import(`@/views/Profile.vue`),
                    children: []
                }
            ];
            if (menu.length) {
                menu.forEach((item: any) => {
                    if (item.children) {
                        item.children = item.children.map((item: any) => {
                            item.component = () => import(`@/views/${item.url}`);
                            return item;
                        });
                        currentMenu[0].children.push(...item.children);
                    } else {
                        item.component = () => import(`@/views/${item.url}`);
                        currentMenu[0].children.push(item);
                    }
                });
                router.addRoutes(currentMenu);
            }

            // }
        },
        getMenu(state) {
            let tagsession = sessionStorage.getItem('tagList');
            if (tagsession) {
                let tagList = JSON.parse(tagsession);
                state.tabsList = tagList;
            }
        }
}

页面中交互

登陆按钮：
async doLogin() {
        
        if (ret.success) {
            sessionStorage.setItem('user', JSON.stringify(ret.data));
            this.$router.push({
                path: '/'
            });
            // 先清除 防止重复加入
            this.$store.commit('clearMenu');
            // 再加入
            this.$store.commit('setMenu', ret.data.menu);
        } else {
            Utils.showWarning(String('登陆失败：') + ret.message);
        }
    }
   切换菜单：
   clickMenu(item: any) {
       
        this.$store.commit('selectMenu', item);
    }

在menu组件中使用

<el-menu :default-active="$route.path" unique-opened  router>
                    <template v-for="(item,index) in allMenus">
                        <el-submenu v-if="!item.leaf && item.visible" :index="index+''" :key="item.tag" class="submenu" :class="index === activeNavIndex && 'is-active'">
                            <template slot="title">
                                <i :class="item.icon" class="iconfont" /><span class="menu-title-1">{{ ttt(item.name) }}</span>
                            </template>
                            <el-menu-item v-for="child in item.children" @click="clickMenu(child)" :index="child.path" v-show="!child.hidden" :key="child.tag">
                                <!-- <i :class="child.icon" class="icon"/> -->
                                <span class="menu-title-2">{{ ttt(child.name) }}</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item @click="clickMenu(item)" v-if="item.leaf && item.visible" :index="item.path" :key="item.tag" style="padding-left: 20px !important">
                            <i :class="item.icon" class="iconfont" /><span class="menu-title-1">{{ttt(item.name)}}</span>
                        </el-menu-item>
                    </template>
                </el-menu>

 clickMenu(item: any) {
        this.$store.commit('selectMenu', item);
    }
 
注意：没有子组件循环的时候，传item不要传child