1. 程式人生 > >iview中重新整理頁面的時候更新導航選單的active-name

iview中重新整理頁面的時候更新導航選單的active-name

在做專案的時候,遇到一個問題,當重新整理頁面的時候,導航的啟用選單和當前顯示的元件不匹配,查了一下官網(https://www.iviewui.com/components/menu),寥寥幾句話就說完了,至於怎麼實現沒有詳細說明

Menu methods:

方法名    說明    引數
updateOpened    手動更新展開的子目錄,注意要在 $nextTick 裡呼叫    無
updateActiveName    手動更新當前選擇項,注意要在 $nextTick 裡呼叫    無

所以下面就詳細說明一下步驟:

1、在data中,定義一個變數shop:"shop-list"(值為選單項的name,類似於預設值)

2、讓 :active-name="shop"

3、給Menu新增ref屬性,值為shop

4、當元件掛載的時候,更新active-name的值,注意:要在$nextTick裡進行呼叫哦

說著有點抽象,所以,下面直接示例哈

1、

<Sider hide-trigger  breakpoint="md" collapsible :collapsed-width="200"  :style="{background: '#fff',marginTop:'30px'}">
          <Menu :active-name="shop" ref="shop" theme="light" width="auto" :open-names="['1']">
            <MenuItem name="shop-list" to="/shop-list">店鋪列表</MenuItem>
            <MenuItem name="shop-add" to="/shop-add">店鋪新增</MenuItem>
          </Menu>
</Sider>
export default {
    name: "shop",
    data(){
      return {
        flag:"店鋪列表",
        breadcrumb:'/shop-list',
        shop:"shop-list"
      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.breadcrumb = this.$route.path
        this.flag = flags[this.$route.path.slice(1)]
        this.shop = this.breadcrumb.slice(1)
        this.$refs.shop.updateActiveName()
      })
    }
   
  }

註釋:我上面的示例,是把選單的name值設定成和路徑一樣的值,通過獲取位址列中的路徑值,來動態的更新active-class的值,當然,其它的方法也都大同小異,有思路就有辦法哈,如果看到的您有更好的辦法,歡迎下方留言分享,如果您有什麼沒有看懂的地方也可以留言提問,我會非常樂意幫您解疑答惑哦