vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)
更新時(shí)間：2023年12月08日 11:00:12 作者：erdongji
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實(shí)現(xiàn)菜單導(dǎo)航,通過點(diǎn)擊菜單項(xiàng)來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下
利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)
附：vue3路由匹配和使用elementPlus路由跳轉(zhuǎn)
使用el-menu路由不調(diào)轉(zhuǎn)
<el-menu active-text-color="#ffd04b"
background-color="#545c64"
text-color="#fff"
class="el-menu-verticaldemo layout-menu"
:collapse="isCollapse"
@open="handleOpen"
router
></el-menu>
- 需要在 el-menu 中添加 router
- 配置
el-menu-item上的 route 跳轉(zhuǎn)路徑和 index 然后路由正常跳轉(zhuǎn)
<el-menu-item :route="{name:c.path}"
:index="c.path"> {{c.meta.title}}
</el-menu-item>
在某個(gè)頁面輸入不存在的路徑頁面跳轉(zhuǎn)
- 配置404頁面在匹配不到路由的時(shí)候跳轉(zhuǎn)到404
- 跳轉(zhuǎn)到首頁
router.beforeEach(async (to, from, next) => { if (to.matched.length === 0) { //如果未匹配到路由 //如果上級(jí)也未匹配 到路由則跳轉(zhuǎn)登錄頁面，如果上級(jí)能匹配到則轉(zhuǎn)上級(jí)路由 from.name ? next({name: from.name}) : next('/'); } else { next(); //如果匹配到正確跳轉(zhuǎn) } }) - 頁面在刷新的時(shí)候沒有停留在當(dāng)前頁面 返回了首頁
匹配
*一定要寫在所有路由最后{path: '/:pathMatch(.*)', hidden: true, redirect: '/'} //當(dāng)用戶輸入頁面鏈接錯(cuò)誤或者沒有該頁面時(shí)，顯示該路徑頁面
總結(jié)
到此這篇關(guān)于vue3+element plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)el-menu實(shí)現(xiàn)路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue+elementUI中使用Echarts之餅圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
文章主要介紹了Vue中的v-if、v-else-if和v-else的等這三種指令的使用方法和場(chǎng)景,還對(duì)比了v-if和v-show的區(qū)別,并提供了實(shí)際開發(fā)中選擇v-if或v-show的的建議2026-05-05
Vue3 中 watch的 flush 選項(xiàng)(默認(rèn)無/`post`/`sync`
文章介紹了Vue3中watch的flush選項(xiàng),解釋了三種模式（默認(rèn)pre、post、sync）的工作機(jī)制和適用場(chǎng)景,并提供了代碼示例進(jìn)行對(duì)比,強(qiáng)調(diào)了在90%的場(chǎng)景下選擇post模式以確保操作DOM的正確性,感興趣的朋友跟隨小編一起看看吧2026-03-03
關(guān)于element-ui resetFields重置方法無效問題及解決
這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue組合式API如何正確解構(gòu)props不會(huì)丟失響應(yīng)性
響應(yīng)式?API?賦予了組合式?API?一大坨可能性的同時(shí),代碼精簡(jiǎn),雖然但是,我們應(yīng)該意識(shí)到響應(yīng)性的某些陷阱,比如丟失響應(yīng)性,在本文中,我們將學(xué)習(xí)如何正確解構(gòu)?Vue?組件的?props,使得?props?不會(huì)丟失響應(yīng)性2024-01-01
vue使用微信JS-SDK實(shí)現(xiàn)分享功能
這篇文章主要介紹了vue使用微信JS-SDK實(shí)現(xiàn)分享功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)
這篇文章主要介紹了vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了Vue input輸入框中的值如何變成黑點(diǎn)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了詳解vuex之store源碼簡(jiǎn)單解析，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06