vue-router 动态路由匹配

最新推荐文章于 2023-08-01 11:29:54 发布

Tong XU

最新推荐文章于 2023-08-01 11:29:54 发布

阅读量576

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41700374/article/details/102872615

版权

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在router的路由路径中使用“动态路径参数”来达到这个效果：const User = { template: '<div>User {{ this.$route.params.id }}</div>',...

摘要由CSDN通过智能技术生成

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在router的路由路径中使用“动态路径参数”来达到这个效果：

const User = {
				template: '<div>User {
  { this.$route.params.id }}</div>',
				watch: {
					'$route'(to, from) {
						console.log(to, from)
					}
				}
			}
			
			const router = new VueRouter({
				routes: [
					{path: '/user/:id', component: User}
				]
			})

现在呢，像/user/foo和/user/bar都将映射到相同的路由。

一个“路径参数”使用冒号：标记。当匹配到一个路由时，参数会被设置到this.$route.params，可以在每个组件内使用。于是，我们可以更新User的模板，输出当前用户的ID。

匹配优先级

有时候，同一个路由可以匹配到多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义，谁的优先级就高。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TEST-VU

最低0.47元/天解锁文章

Tong XU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router 动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在router的路由路径中使用“动态路径参数”来达到这个效果：const User = { template: '<div>User {{ this.$route.params.id }}</div>',...
复制链接

扫一扫