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