elementUI中MENU菜單踩坑
需求:點(diǎn)擊當(dāng)前頁(yè)面的按鈕跳轉(zhuǎn)到首頁(yè),給menu中綁定的default-active賦值
問(wèn)題:頁(yè)面已經(jīng)跳轉(zhuǎn)過(guò)去,可menu選中項(xiàng)根本沒(méi)有發(fā)生變化
解決辦法: 直接將當(dāng)前頁(yè)面的路由綁定到default-active上,同時(shí)將index改為當(dāng)前路由,這樣在通過(guò)非點(diǎn)擊導(dǎo)航菜單跳轉(zhuǎn)頁(yè)面時(shí)就不需要再來(lái)手動(dòng)改變導(dǎo)航菜單的選中項(xiàng)了,它會(huì)自己選中當(dāng)前頁(yè)面的tab項(xiàng),完美解決!
說(shuō)明: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>首頁(yè)</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>時(shí)間軸</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>后臺(tái)管理</span> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-menu-item> ? ? </el-menu>
到此這篇關(guān)于elementUI中MENU菜單踩坑的文章就介紹到這了,更多相關(guān)elementUI MENU菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli 3.0 自定義vue.config.js文件,多頁(yè)構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁(yè)構(gòu)建的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架,在框架上,領(lǐng)導(dǎo)要用AdminLTE這套模板,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09解決Vue在Tomcat8下部署頁(yè)面不加載的問(wèn)題
今天小編就為大家分享一篇解決Vue在Tomcat8下部署頁(yè)面不加載的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue語(yǔ)法自動(dòng)轉(zhuǎn)typescript(解放雙手)
這篇文章主要介紹了vue語(yǔ)法自動(dòng)轉(zhuǎn)typescript,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09vue通過(guò)element樹形控件實(shí)現(xiàn)樹形表格
這篇文章主要為大家介紹了vue?element樹形控件實(shí)現(xiàn)樹形表格,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11