iview實戰--Menu根據路由對應高亮Menu項

Template內容

<Menu active-name="">
        <MenuItem  name="home" to="/home">home</MenuItem>
        <MenuItem name="about" to="/about">about</MenuItem>
 </Menu>
複製代碼

實戰

• 需求：根據路由高亮對應菜單項

  • 高亮項根據active-name進行判斷匹配的MenuItem的name屬性
  • 獲取路由參數 this.$route.path （相似 /home）
  • 監聽$route動態改變Menu上的active-name屬性

代碼

<!--Menu  -->
<template>
  <div id="app">
    <div id="nav">
      <Menu :active-name="act_name">
        <MenuItem name="/home" to="/home">home</MenuItem>
        <MenuItem name="/about" to="/about">about</MenuItem>
      </Menu>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        act_name: this.$route.path
      };
    },
    computed: {},
    watch: {
      "$route"(){
        this.act_name = this.$route.path
      }
    },
    methods: {
    },
  }
</script>
<style lang='scss' scoped>
</style>
複製代碼