iview中重新整理頁面的時候更新導航選單的active-name
阿新 • • 發佈:2019-01-10
在做專案的時候,遇到一個問題,當重新整理頁面的時候,導航的啟用選單和當前顯示的元件不匹配,查了一下官網(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的值,當然,其它的方法也都大同小異,有思路就有辦法哈,如果看到的您有更好的辦法,歡迎下方留言分享,如果您有什麼沒有看懂的地方也可以留言提問,我會非常樂意幫您解疑答惑哦