需求分析
在实际的vue开发中,我们想实现点击header菜单栏组件中的某一个选项,在跳转到该路由的同时,菜单栏依旧存在,且被点击的菜单选项为active状态
例如图1,我们想点击用户管理时,跳转到用户管理的路由,并保持菜单栏不变,我们并不希望出现像图2这样的效果
图1
图2
解决方法
在App.vue(webpack自动创建好的,原本保存的是Vue的logo)中编写我们需要保存的公共组件,并把原来的标签去除,放在我们的菜单栏中,示例代码如下:
<template>
<div id="app">
<el-container>
<el-header>
<!--导航菜单-->
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="/index">主页</el-menu-item>
<el-menu-item index="/users" >用户管理</el-menu-item>
<el-menu-item index="/msgs" >消息中心</el-menu-item>
<el-menu-item index="orders">订单管理</el-menu-item>
</el-menu>
<div class="line"></div>
</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
activeIndex: '/index',
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.$router.push(key);
}
}
}
</script>
<style>
</style>
效果图展示