快捷導(dǎo)航

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

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

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

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

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

查看vue-router路由文檔可以看出 Vue2中是通過(guò)matcher來(lái)進(jìn)行重新賦值來(lái)進(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中沒(méi)有關(guān)于matcher這個(gè)屬性，這樣一來(lái)，就需要自己通過(guò)循環(huán)遍歷來(lái)清除路由，

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.use自定義自己的全局組件
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
iview 權(quán)限管理的實(shí)現(xiàn)
本文主要介紹了iview 權(quán)限管理，iview-admin2.0自帶權(quán)限管理?？梢酝ㄟ^(guò)設(shè)置路由的meta對(duì)象的參數(shù)access來(lái)分配權(quán)限。感興趣的可以了解一下
2021-07-07
Vue3 ref構(gòu)建響應(yīng)式變量失效問(wèn)題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue使用vue-i18n實(shí)現(xiàn)國(guó)際化的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue使用vue-i18n實(shí)現(xiàn)國(guó)際化的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要為大家介紹了如何簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
解決elementui上傳組件el-upload無(wú)法第二次上傳問(wèn)題
這篇文章主要介紹了解決elementui上傳組件el-upload無(wú)法第二次上傳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query
這篇文章主要介紹了Vue-Router如何動(dòng)態(tài)更改當(dāng)前頁(yè)url query問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue分頁(yè)插件的前后端配置與使用
這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)插件的前后端配置與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
Vue中使用富文本編輯框的實(shí)踐與探索
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制
2024-10-10
Vue實(shí)現(xiàn)pdf在線預(yù)覽功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)pdf在線預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03