2024年4月5日发(作者：)

vue router 路径参数

Vue Router 可以通过路径参数（path params）来匹配动态路由，例如：

js

const router = new VueRouter({

routes: [

{

path: '/user/:id',

component: User

}

]

})

在上述示例中，`:id` 表示一个动态参数，可以匹配任何非空字符串，例如

`/user/123`、`/user/abc` 等。

当用户访问 `/user/123` 时，Vue Router 会将路径参数 `id` 的值设置为

`'123'`，并将此值传递给 `User` 组件，作为其属性（props）的一部分：

js

const User = {

props: ['id'],

/* ... */

}

此时，组件内部可以通过 `` 访问路径参数的值。

需要注意的是，在路径参数后面可能会有其他参数，例如：

`/user/123?name=john`。Vue Router 会忽略这些参数，只匹配路径参数部分，

因此路径参数值为 `'123'`，而忽略查询参数 `name`。