Vue中el-menu-item實現(xiàn)路由跳轉的完整步驟
更新時間：2022年09月20日 14:31:02 作者：小羊羊.
這篇文章主要給大家介紹了關于Vue中el-menu-item實現(xiàn)路由跳轉的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
場景：
用了element-ui的el-menu 菜單 怎樣實現(xiàn)路由跳轉呢？
方法如下：
1，在el-menu加上router，添加el-menu的default-active屬性，加：動態(tài)綁定，值設置為"this.$router.path" ，
2，將el-menu-item的index設置為路由跳轉path，和route.js相對應
代碼：
<el-menu router ? ? ? ? :default-active="this.$router.path" ? ? ? ? class="el-menu-vertical-demo" ? ? ? ? background-color="#545c64" ? ? ? ? text-color="#fff" ? ? ? ? active-text-color="#ffd04b"> ? ? ? ? <el-submenu index="1"> ? ? ? ? ? <template slot="title"> ? ? ? ? ? ? <i class="el-icon-location"></i> ? ? ? ? ? ? <span>導航一</span> ? ? ? ? ? </template> ? ? ? ? ? <el-menu-item-group> ? ? ? ? ? ? <el-menu-item index="/xieyituigai" >協(xié)議退改</el-menu-item> ? ? ? ? ? </el-menu-item-group> ? ? ? ? ? <el-submenu index="1-4"> ? ? ? ? ? ? <template slot="title">酒店</template> ? ? ? ? ? ? <el-menu-item index="/form">酒店預訂</el-menu-item> ? ? ? ? ? </el-submenu> ? ? ? ? </el-submenu> ? ? ? ? <el-menu-item index="2"> ? ? ? ? ? <i class="el-icon-menu"></i> ? ? ? ? ? <span slot="title">導航二</span> ? ? ? ? </el-menu-item> ? ? ? </el-menu> ?
補充：el-menu-item 實現(xiàn)水平導航欄，路由的跳轉
<el-menu
class="el-menu-vertical-demo"
id="topNav"
router
background-color='#ededed'
text-color='#000000'
mode="horizontal"
:default-active="activeIndex"
>
<el-menu-item v-for="item in topArray" :key="item.key" :index="item.name" class="contentShow">
<template>
<span :key="item.key" >{{item.name}}</span>
<img src="../image/outPage.png" :key="item.key">
</template>
</el-menu-item>
</el-menu>做了一個項目，是左側導航樹進行點擊后，上方出現(xiàn)相應的模塊，可進行跳轉，而且是動態(tài)進行添加的，效果圖如下：
總結
到此這篇關于Vue中el-menu-item實現(xiàn)路由跳轉的文章就介紹到這了,更多相關Vue el-menu-item路由跳轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
?最近需要再頁面里做個倒計時,發(fā)現(xiàn)用clearInterval()清除定時器失效,下面這篇文章主要給大家介紹了關于VUE設置和清除定時器的方式及遇到的問題的相關資料,需要的朋友可以參考下2022-10-10
vue?element修改el-select控件長度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長度style=“width:XXpx“不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue中的scoped實現(xiàn)原理及穿透方法,本文通過實例文字相結合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-05-05
Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
下面小編就為大家分享一篇webpack配置導致字體圖標無法顯示的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了Hooks對于Vue作用意義詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue自定義marquee無縫滾動組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
今天小編就為大家分享一篇vue-resource:jsonp請求百度搜索的接口示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
sublime如何配置開發(fā)VUE環(huán)境自動格式化代碼
這篇文章主要介紹了sublime如何配置開發(fā)VUE環(huán)境自動格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12