vue清除動態(tài)路由的問題記錄
更新時間:2023年10月18日 14:47:02 作者:?﹏????
項目中往往都是添加動態(tài)路由,如何刪除已經(jīng)添加進來的路由往往被忽視,為此這里做一下記錄,感興趣的朋友跟隨小編一起看看吧
vue清除動態(tài)路由
項目中往往都是添加動態(tài)路由,如何刪除已經(jīng)添加進來的路由往往被忽視,為此這里做一下記錄:
查看vue-router路由文檔 可以看出 Vue2中是通過matcher來進行重新賦值來進行清空的。
let createRouter = () => new Router({ mode: 'history', //hash history后端支持可開,需配置nginx, 次模式下不會再返回404界面 routes: constantRouterMap, // 路由路徑 scrollBehavior: () => ({ y: 0 }) // 在切換時定位路由滾動條的位置 }); const router = createRouter() export function resetRouter () { //清空路由的方法 const newRouter = createRouter() router.matcher = newRouter.matcher } export default router;
而Vue3中沒有關于matcher這個屬性,這樣一來,就需要自己通過循環(huán)遍歷來清除路由,
const router = createRouter({ routes, history: createWebHashHistory() }) console.log(router.getRoutes()); //重置路由 export function resetRouter(){ let routers = router.getRoutes() console.log(routers); routers.map((it:any)=>{ if(!whiteList.includes(it.name)){ router.removeRoute(it.name) } }) console.log(routers); }
** 注:whiteList是白名單,
到此這篇關于vue清除動態(tài)路由的文章就介紹到這了,更多相關vue清除動態(tài)路由內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue使用vue-i18n實現(xiàn)國際化的實現(xiàn)代碼
本篇文章主要介紹了vue使用vue-i18n實現(xiàn)國際化的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04解決elementui上傳組件el-upload無法第二次上傳問題
這篇文章主要介紹了解決elementui上傳組件el-upload無法第二次上傳問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vue-Router如何動態(tài)更改當前頁url query
這篇文章主要介紹了Vue-Router如何動態(tài)更改當前頁url query問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08