通常情况下我们是在routes选项中定义路由跳转规则
另外我们可以使用VueRouter提供的API进行添加和删除路由
添加路由 router.addRoute()
注意:
1. 默认情况每次使用addRouter只能注册一个新的路由
2. 如果新增路由与当前位置路由相匹配,想要显示新的路由,需要手动使用router.push()或router.replace() 进行导航跳转
// 配置路由规则
const router = createRouter({
history: createWebHistory(),
routes: [{path: '/:articleName',component: Article}],
})
// 使用 addRouter() 新注册一个路由
router.addRouter({ path:'/about', component: About}) // 如果此时我们所在路由与当前新增路由相匹配,只会停留在当前路由,无法显示新的路由。 需要我们使用router.replace()或router.push() 手动导航
// 避免在history中出现两次重复地址,我们使用router.replace() 替换之前的地址
router.replace('/about')
// 注意:如果我们需要等待新的路由显示 可以使用await router.replace()
在导航守卫中添加路由
如果你决定在路由守卫内部添加或删除路由,你不应该调用router.replace(),而是使用return 返回新的位置在触发重定向
router.beforeEach(to=>{
// 避免无线重定向
if(!hasNecessaryRoute(to)){
router.addRoute(generateRoute(to))
return to.fullPath
}
})
删除路由 router.removeRoute()
第一种删除:通过添加一个名称冲突的路由。如果添加与现有途径名称相同的路径,会先删除路由,在添加路由
// 添加一个name为about的路由
router.add({path: '/about', name: 'about', component: About})
// 添加重复name的路由,但是组件不同
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.add({path: '/about', name: 'about', component: Other})
第二种删除:通过router.addRoute() 返回的回调
const removeRoute = router.addRoute(routeRecode)
removeRoute() // 删除路由如果存在的话 注意:适合删除没有名称的路由
第三种删除:通过router.removeRoute() 按照名称删除
router.addRoute({path: '/about', name:'about', component: About})
// 删除路由 如果想避免名字的冲突,可以在路由中使用Symbol作为名字
router.removeRoute('about') // 注意:删除该路由的话,其所有的别名和子路由都会被同时删除
添加嵌套路由
router.addRoute({name:'father', path:'/fatherPath', component: Father})
// 如果想添加嵌套路由 则可以通过指定name 进行嵌套添加
router.addRoute({'father',{path: 'sonPath', component: Son}})
// 等效于
router.addRoute({
name: 'father',
path: '/fatherPath',
component: Father,
children: [{path: 'sonPath', component: Son}}]
})
查看现有的路由
VueRouter 提供了两个功能来查看现有的路由
* router.hashRoute() :检查路由已存在
* router.getRoutes() :获取一个包含所有路由记录的数组