element-ui 中的 NavMenu 导航菜单 el-menu-item标签 自定义默认被选中

• 是选中的’/Book/HomePage’ 默认选中的
• 至于这个’/Book/HomePage’ 就是 你 循环出来的 的值:index=“item.name”

<template>
  <div id="index">
     <el-menu :default-active="'/Book/HomePage'"
             router
             mode="horizontal"
             background-color="white"
             text-color="#222"
             active-text-color="red"
             style="min-width: 1300px">
      <el-menu-item v-for="(item,i) in navList"
                    :key="i"
                    :index="item.name">
        {
    
    {
    
     item.navItem }}
      </el-menu-item>
    
     
      <a href="#nowhere"
         style="color: #222;float: right;padding: 20px;">更多功能</a>
      <i class="el-icon-menu"
         style="float:right;font-size: 45px;color: #222;padding-top: 8px"></i>
      <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">书籍是人类的进步的阶梯高尔基！！！</span>
    </el-menu>

    <div class="content"
         ref="content">
      <router-view />
    </div>
  </div>

</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      navList: [
        {
    
     name: '/Book/HomePage', navItem: '首页' },
        {
    
     name: '/Book/jotter', navItem: '笔记本'},
        {
    
     name: '/Book/library', navItem: '图书馆'},
        {
    
     name: '/Book/user', navItem: '个人中心'},
      ],
    }
  },
  mounted() {
    
    
    this.$refs.content.style.height =
      document.documentElement.clientHeight - 62.22 + 'px' //设置高度
  },
  methods: {
    
    
    getUserInfo() {
    
    
      var serInfo = sessionStorage.getItem('userInfo')
      this.$store.commit('USER_SIGNIN', userInfo)
    },
    handleSelect(key, keyPath) {
    
    
        console.log(key, keyPath);
      }
  },
}
</script>

<style scoped>
#index {
    
    
  width: 100%;
  height: 100%;
}
#index .content {
    
    
  height: 100%;
}
</style>