快捷導(dǎo)航

vue清除動(dòng)態(tài)路由的問題記錄

更新時(shí)間：2023年10月18日 14:47:02 作者：?﹏????

項(xiàng)目中往往都是添加動(dòng)態(tài)路由，如何刪除已經(jīng)添加進(jìn)來的路由往往被忽視，為此這里做一下記錄，感興趣的朋友跟隨小編一起看看吧

vue清除動(dòng)態(tài)路由

項(xiàng)目中往往都是添加動(dòng)態(tài)路由，如何刪除已經(jīng)添加進(jìn)來的路由往往被忽視，為此這里做一下記錄：

查看vue-router路由文檔可以看出 Vue2中是通過matcher來進(jìn)行重新賦值來進(jìn)行清空的。

let createRouter  = () => new Router({
  mode: 'history', //hash history后端支持可開,需配置nginx， 次模式下不會(huì)再返回404界面
  routes: constantRouterMap, // 路由路徑
  scrollBehavior: () => ({ y: 0 }) // 在切換時(shí)定位路由滾動(dòng)條的位置
});
const router = createRouter()
export function resetRouter () { //清空路由的方法
  const newRouter = createRouter()
  router.matcher = newRouter.matcher 
}
export default router;

而Vue3中沒有關(guān)于matcher這個(gè)屬性，這樣一來，就需要自己通過循環(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是白名單，

到此這篇關(guān)于vue清除動(dòng)態(tài)路由的文章就介紹到這了,更多相關(guān)vue清除動(dòng)態(tài)路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中methods實(shí)現(xiàn)原理是什么
methods是如何綁定this的 methods綁定上下文執(zhí)行環(huán)境是通過bind來進(jìn)行的呢,本文給大家介紹Vue中methods實(shí)現(xiàn)原理是什么,感興趣的朋友一起看看吧
2023-11-11
Antd的table組件表格的序號(hào)自增操作
這篇文章主要介紹了Antd的table組件表格的序號(hào)自增操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個(gè)數(shù)據(jù)結(jié)構(gòu))
這篇文章主要介紹了手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個(gè)數(shù)據(jù)結(jié)構(gòu)),響應(yīng)式就是被觀察的數(shù)據(jù)變化的時(shí)候做一系列聯(lián)動(dòng)處理。就像一個(gè)社會(huì)熱點(diǎn)事件，當(dāng)它有消息更新的時(shí)候，各方媒體都會(huì)跟進(jìn)做相關(guān)報(bào)道。這里社會(huì)熱點(diǎn)事件就是被觀察的目標(biāo)
2022-06-06
vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能示例
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能,結(jié)合實(shí)例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
Vue開發(fā)中常見的套路和技巧總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue開發(fā)中常見的套路和技巧的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue3之向echarts組件傳值的問題分析
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來減少重復(fù)渲染的次數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能詳解
ExcelJS是一個(gè)用于在Node.js和瀏覽器中創(chuàng)建、讀取和修改Excel文件的強(qiáng)大JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能的相關(guān)資料,需要的朋友可以參考下
2024-05-05
Vue編譯器AST抽象語法樹源碼分析
這篇文章主要為大家介紹了Vue編譯器AST抽象語法樹源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue3+Vite4項(xiàng)目進(jìn)行性能優(yōu)化的配置方案
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vite4對(duì)項(xiàng)目進(jìn)行性能優(yōu)化的相關(guān)配置,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-04-04