vue router push 传参

作者：冷空气来袭发布日期:2025-04-02 浏览:54

// 示例代码：使用 Vue Router 的 push 方法传参

// 假设我们有一个路由配置如下：
const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: UserComponent
  }
]

// 在组件中使用 push 方法传参：

// 1. 使用路径形式传参
this.$router.push({ path: '/user/123' });

// 解释：这里我们将参数直接拼接到路径中，用户访问的 URL 将会是 /user/123。

// 2. 使用命名路由和 params 参数传参
this.$router.push({ name: 'user', params: { id: 123 } });

// 解释：通过命名路由的方式传递参数，这种方式更加灵活，且不会在 URL 中显示参数。这里的 id 参数将会被传递给对应的路由组件。

// 3. 使用 query 参数传参
this.$router.push({ path: '/user', query: { id: 123 } });

// 解释：使用 query 参数传递数据时，参数会以查询字符串的形式附加到 URL 后面，例如 /user?id=123。

上一篇：vue socket

下一篇：vue splice()函数