elementUI中MENU菜單踩坑
需求:點擊當(dāng)前頁面的按鈕跳轉(zhuǎn)到首頁,給menu中綁定的default-active賦值
問題:頁面已經(jīng)跳轉(zhuǎn)過去,可menu選中項根本沒有發(fā)生變化
解決辦法: 直接將當(dāng)前頁面的路由綁定到default-active上,同時將index改為當(dāng)前路由,這樣在通過非點擊導(dǎo)航菜單跳轉(zhuǎn)頁面時就不需要再來手動改變導(dǎo)航菜單的選中項了,它會自己選中當(dāng)前頁面的tab項,完美解決!
說明:router屬性很重要,default-active="this.$route.path"也很重要。
<el-menu ? ? ? ? :router="true" ? ? ? ? :default-active="$route.name" ? ? ? ? class="el-menu-demo" ? ? ? ? mode="horizontal" ? ? ? ? @select="select" ? ? ? ? background-color="#545c64" ? ? ? ? text-color="#fff" ? ? ? ? active-text-color="#ffd04b"> ? ? ? ? ? ? <el-menu-item :route="{name: 'home'}" index="home"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <Icon type="ios-home"></Icon> ? ? ? ? ? ? ? ? ? ? <span>首頁</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? ? ? ? ?? ? ? ? ? ? ? <el-menu-item :route="{name: 'article'}" index="article"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? ? ? ? ? <span>文章</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? ? ? ? ? ? <el-menu-item :route="{name: 'time'}" index="time"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? ? ? ? ? <span>時間軸</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? ? ? ? ?? ? ? ? ? ? ? <el-menu-item :route="{name: 'photo'}" index="photo"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? ? ? ? ? <span>生活照</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? ? ? ? ?? ? ? ? ? ? ? <el-menu-item :route="{name: 'footprint'}" index="footprint"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? ? ? ? ? <span>足跡</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? ? ? ? ?? ? ? ? ? ? ? <el-menu-item :route="{name: 'aboutme'}" index="aboutme"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? ? ? ? ? <span>關(guān)于我</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? ? ? ? ? ? <el-menu-item :route="{name: 'message'}" index="message"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? ? ? ? ? <span>留言板</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? ? ? ? ? <el-menu-item :route="{name: 'manage'}" index="manage"> ? ? ? ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? ? ? ? ? <span>后臺管理</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? </el-menu>
到此這篇關(guān)于elementUI中MENU菜單踩坑的文章就介紹到這了,更多相關(guān)elementUI MENU菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue語法自動轉(zhuǎn)typescript(解放雙手)
這篇文章主要介紹了vue語法自動轉(zhuǎn)typescript,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09