在 Vue Router 中，path: ':postId' 这样的写法用于定义动态路由参数。动态路由参数允许你将 URL 中的一部分作为参数传递给组件，从而使得组件能够根据传入的参数值动态地渲染内容。这种写法中的冒号 (:) 标志着该部分为动态参数。
动态参数的写法
动态参数在 Vue Router 中有几种不同的写法，主要取决于参数的用途和复杂性：
-
基本动态参数：
path: '/user/:userId'
这里的:userId是一个基本的动态参数，它可以匹配任何非斜杠的字符串。
-
多个动态参数：
path: '/user/:userId/post/:postId'
可以定义多个动态参数，每个参数之间用路径分隔符（通常是斜杠/）分开。
-
带正则表达式的动态参数：
path: '/user/:userId(\d+)'
使用括号和正则表达式可以进一步限制参数的格式。这里的:userId(\\d+)指定userId必须是一个或多个数字。
-
可选的动态参数：
path: '/user/:userId?'
参数后面的问号 (?) 表示这个参数是可选的，URL 既可以包含也可以不包含这个参数。
-
星号通配符参数：
path: '/files/*'
星号 (*) 用于匹配任意长度的路径，常用于 catch-all 路由，捕获所有未被其他规则匹配的路径。
-
命名动态参数： 虽然不是写法上的不同，但值得注意的是，你可以通过
name属性给路由命名，这在处理复杂的路由结构时很有帮助。const route = { path: '/user/:userId', name: 'UserDetail', };
动态参数的作用
动态参数在构建功能丰富且灵活的 Web 应用中非常重要，它们使得 URL 能够携带有用的信息，例如用户 ID、产品 ID 或文章 ID，从而允许应用程序根据这些参数呈现定制化的内容。
例如，当用户访问 /user/123 或 /user/456 时，组件可以通过 this.$route.params.userId 访问到实际的用户 ID，进而加载并显示对应用户的信息。这种灵活性使得单页应用能够模仿传统多页面网站的行为，同时提供更加流畅和响应迅速的用户体验。
