IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue动态路由 -> 正文阅读

[JavaScript知识库]Vue动态路由


??向路由器添加路由通常是通过routes选项完成的,但是在某些情况下,我们可能希望在应用程序已经运行时添加或删除路由,也就是以编程的方式添加或删除路由。

1、添加路由

??动态路由主要通过两个方法来实现:router.addRoute()router.removeRoute()router.addRoute()方法只是注册一个新的路由,如果新注册的路由与当前位置匹配,则需要使用router.push()函数或router.replate()函数手动导航以显示新路由。
??在下面的代码中,只定义了一个单一的路由:

const router=createRouter({
	history:createWebHistory(),
	routes:[{
		path:'/:acticleName',
		component:Article
	}],
})

??转到任何页面,如/about、/store,都将渲染Article组件。如果在/about上想显示一个新路由,那么仅仅编写下面的代码是不够的

router.addRoute({
	path:'/about',
	component:About
})

??路由到/about页面,仍将显示Article组件。要显示About组件,我们需要手动调用router.replate()函数改变当前位置并覆盖之前的位置。代码如下所示:

router.addRoute({
	path:'/about',
	component:About
})
//也可以使用this.$route或route=useRoute()(在setup函数中)
router.replace(router.currentRoute.value.fullPath)

??如果需要等待新路由显示,则可以调用await.router.replace()

2、在导航守卫中添加路由

??在导航守卫中添加或删除路由,不要调用router.replace()函数,而是通过返回新的位置来触发重定向。代码如下所示:

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

??上面的示例假设两件事:首先,新添加的路由记录将匹配到目标位置,这实际上导致了与我们尝试访问的位置不同;其次,hasNecessaryRoute()函数在添加新路由后返回false,以避免无线重定向。
??因为我们进行了重定向,所以替换了正在进行的导航守卫,其行为与前面的示例类似。在实际场景中,添加更有可能发生在导航守卫之外。例如,当一个视图组件挂在时,它会注册新的路由。

3、删除路由

??有几种不同的方式可以删除现有的路由。

3.1 通过添加名称冲突的路由。

??如果添加了一个与现有路由同名的路由,那么会先删除该路由,然后再添加路由。代码如下所示:

router.addRoute({
	path:'/about',
	name:'about',
	component:About
})
//这将删除先前添加的路由,因为它们具有相同的名称且名称是唯一的
router.addRoute({
	path:'/other',
	name:'about',
	component:Other
})

3.2 通过调用router.addRoute()函数返回的回调。

const removeRoute=router.addRoute(routeRecord)
removeRoute()	//如果路由存在,则删除它

??这在路由没有名称时非常有用。

3.3 通过调用router.removeRoute()函数按名称删除一个路由。

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

??注意:如果希望使用remoceRoute()函数,但又希望避免名称冲突,可以在路由中使用Symbol作为名称。
??当一个路由被删除时,它的所有别名和子路由都会被删除。

4、添加嵌套路由

??要想现有路由添加嵌套路由,可将路由的名称作为第一个参数传递给router.addRoute()函数,这将有效地添加路由,就像通过children添加一样。代码如下所示:

router.addRoute({
	name:'admin',
	path:'/admin',
	component:Admin
})
router.addRoute('admin',{
	path:'settings',
	component:AdminSettings
})

??这相当于:

router.addRoute({
	name:'admin',
	path:'/admin',
	component:Admin,
	children:[{
		path:'settings',
		component:adminSettings
	}]
})

5、查看现有路由

??Vue Router给出了两个查看现有路由的函数:

router.hasRoute:检查路由是否存在。
router.getRoutes():获取包含所有路有记录的数组。
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-25 11:33:33  更:2021-07-25 11:36:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/1 20:14:58-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码