目錄

添加動態路由

添加單個路由

添加多個路由

指定路由添加的位置

導航守衛添加路由

刪除動態路由

---

添加動態路由

添加動態路由的方法有兩個：addRoutes（添加多個路由）和addRoute（添加單個路由），但是addRoutes只能vue2用，并且已經過時了，所以推薦用addRoute

添加單個路由

• getRoutes()? 可以查看所有路由

• hasRoute()? ?可以查看是否有某路由

<template><main><el-button @click="addRoutes">添加動態路由</el-button><el-button @click="toDemo01">跳轉Demo01</el-button></main>
</template><script setup lang="ts">
import { useRouter } from 'vue-router'const r = useRouter()const addRoutes = () => {r.addRoute({path: '/demo01',name: 'demo01',component: () => import('@/views/Demo01.vue'),})// 查看所有路由console.log(r.getRoutes());// 查看是否存在某路由console.log(r.hasRoute('demo01'));
}const toDemo01 = () => {r.push('/demo01')
}
</script>

還可以添加嵌套路由

• 有一點需要注意：路由規則配置文件里，子路由可以不寫前面的父路由路徑，但是動態路由里不行，必須寫完整路徑

<template><main><h2>Home</h2><el-button @click="addRoutes">添加動態路由</el-button><el-button @click="toDemo02">跳轉Demo02</el-button></main>
</template><script setup lang="ts">
import { useRouter } from 'vue-router'const r = useRouter()const addRoutes = () => {r.addRoute({path: '/demo01',name: 'demo01',children: [{path: '/demo01/demo02', // 子路由一定要完整 只寫/demo02會報錯查找不到路由name: 'demo02',component: () => import('@/views/Demo02.vue'),}]})// 查看所有路由console.log(r.getRoutes());// 查看是否存在某路由console.log(r.hasRoute('demo02'));
}const toDemo02 = () => {r.push('/demo01/demo02')
}
</script>

還可以添加動態路由

<template><main><el-button @click="addRoutes">添加動態路由</el-button><el-button @click="toDemo01">跳轉Demo01</el-button></main>
</template><script setup lang="ts">
import { useRouter } from 'vue-router'const r = useRouter()const addRoutes = () => {r.addRoute({path: '/demo01/:id', // 還可以添加動態路由  路由只要是  ” /demo01/任意路由 “  都可以匹配到Demo01組件name: 'demo01',component: () => import('@/views/Demo01.vue'),})// 查看所有路由console.log(r.getRoutes());// 查看是否存在某路由console.log(r.hasRoute('demo01'));
}const toDemo01 = () => {// r.push('/demo01/1')r.push('/demo01/100')
}
</script>

添加多個路由

添加多個動態路由，可以把所有路由對象組成一個數組，對數組進行遍歷，然后挨個添加

<template><main><el-button @click="addRoutes">添加動態路由</el-button><el-button @click="toDemo01">跳轉Demo01</el-button><el-button @click="toDemo02">跳轉Demo02</el-button></main>
</template><script setup lang="ts">
import { useRouter } from 'vue-router'
import Demo01 from '@/views/Demo01.vue'
import Demo02 from '@/views/Demo02.vue'const r = useRouter()const addRoutes = () => {// 路由信息組成的數組const routeList = [{path: '/demo01',name: 'demo01',component: Demo01},{path: '/demo02',name: 'demo02',component: Demo02},]// 只能遍歷挨個添加routeList.forEach((item: any) => r.addRoute(item))// 查看所有路由console.log(r.getRoutes());// 查看是否存在某路由console.log(r.hasRoute('demo01'));console.log(r.hasRoute('demo02'));
}const toDemo01 = () => {r.push('/demo01')
}const toDemo02 = () => {r.push('/demo02')
}
</script>

指定路由添加的位置

• 也就是可以指定路由添加到那個路由下面，addRoute第一個參數指定要添加到那，第二個參數正常的寫路由信息

路由配置文件

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')}]
})export default router

我們希望路由添加到about路由里面，成為about的子路由

<template><main><el-button @click="addRoutes">添加動態路由</el-button><el-button @click="toDemo01">跳轉Demo01</el-button></main>
</template><script setup lang="ts">
import { useRouter } from 'vue-router'const r = useRouter()const addRoutes = () => {r.addRoute('about', {path: '/about/demo01', // 這里路由一定要寫完整。路由規則配置文件里，子路由可以不寫前面的路由路徑，但是動態路由里不行，必須寫完整路徑name: 'demo01',component: () => import('@/views/Demo01.vue'),})// 查看所有路由console.log(r.getRoutes());// 查看是否存在某路由console.log(r.hasRoute('demo01'));
}const toDemo01 = () => {r.push('/about/demo01')
}
</script>

導航守衛添加路由

一般做前端權限的時候用，添加后應該通過返回新的位置來觸發重定向，不然地址欄輸入路由不會跳轉

router.beforeEach(to => {if (!hasNecessaryRoute(to)) {router.addRoute(generateRoute(to))// 觸發重定向return to.fullPath}
})

• hasNecessaryRoute(to)這個方法是避免重定向的，函數結果返回一個布爾值就行了。to參數攜帶了要前往路由的具體信息，如果是已經添加過的動態路由，應該返回false，避免重復添加，造成路由重定向，如果沒有添加過，則應該返回true，進行動態路由的添加

舉個例子，hasNecessaryRoute函數可以這樣寫

const hasNecessaryRoute = (to: any) => {// return router.getRoutes().some(route => route.path === to.path)// 或者下面這樣return router.hasRoute(to.name)
}

前端權限思想

只是大致寫了下思路，方法千奇百怪，能實現就行

1. 點擊登錄的時候，調用接口，后端返回此用戶的路由信息，

2. 跳轉路由到首頁，然后觸發全局前置導航守衛

3. 在全局前置導航守衛中進行動態路由的添加

刪除動態路由

通過添加一個名稱沖突的路由。如果添加與現有途徑名稱相同的途徑，會先刪除路由，再添加路由
?

router.addRoute({ path: '/about', name: 'about', component: About })
// 這將會刪除之前已經添加的路由，因為他們具有相同的名字且名字必須是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

通過使用?router.removeRoute()?按名稱刪除路由

router.addRoute({ path: '/about', name: 'about', component: About })
// 刪除路由
router.removeRoute('about')

注意：當路由被刪除時，所有的別名和子路由也會被同時刪除