使用Vue cli脚手架实现公共路由，例如菜单栏为公共部分

需求分析
在实际的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>

效果图展示