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) } }) - 頁面在刷新的時候沒有停留在當前頁面 返回了首頁
匹配
*一定要寫在所有路由最后{path: '/:pathMatch(.*)', hidden: true, redirect: '/'} //當用戶輸入頁面鏈接錯誤或者沒有該頁面時，顯示該路徑頁面
總結(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)文章
生命周期分為四個對子，根據(jù)不同的情況使用不同的函數(shù)，這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了 vue中v-for 循環(huán)對象中的屬性，文章圍繞v-for 循環(huán)對象的相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要介紹了element-ui如何防止重復(fù)提交的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要給大家介紹了關(guān)于vue獲取當前路由的五種方式,文中通過代碼示例介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08
vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)
這篇文章主要介紹了vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項目發(fā)布后,瀏覽器上還是舊代碼,沒有及時更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06
淺談Vue.js應(yīng)用的四種AJAX請求數(shù)據(jù)模式
本篇文章主要介紹了淺談Vue.js應(yīng)用的四種AJAX請求數(shù)據(jù)模式，本文將詳細介紹在Vue應(yīng)用程序中實現(xiàn)AJAX的四個方法，有興趣的可以了解一下2017-08-08
vue中父子組件注意事項,傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項,傳值及slot應(yīng)用技巧,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
Vue中的無限加載vue-infinite-loading的方法
本篇文章主要介紹了Vue中的無限加載vue-infinite-loading的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07