vue · 路由传参query和params

在Vue.js中，路由传参主要有两种方式：query和params。每种方式都有其特定的使用场景。

1. 使用query传参

query参数是通过URL的查询字符串传递的，例如：http://example.com/path?key=value。这种方式适用于不需要在URL中直接暴露敏感信息的情况。

定义路由

首先，你需要在Vue Router中定义路由，并使用name或path来指定路径。

const router = new VueRouter({
  routes: [
    {
      path: '/path',
      name: 'SomePath',
      component: SomeComponent
    }
  ]
});

传参

使用query参数时，你可以在路由跳转时通过query对象传递参数。

// 在Vue组件中
this.$router.push({ path: '/path', query: { key: 'value' } });
// 或者使用name进行跳转
this.$router.push({ name: 'SomePath', query: { key: 'value' } });

2. 使用params传参

params参数是URL的一部分，但不显示在URL中（例如：http://example.com/user/123中的123），这种方式适用于当你需要在URL中包含标识符但又不想让它们出现在查询字符串中的情况。但是，需要注意的是，默认情况下，params不会出现在URL中，除非你设置了路由的mode为history或者在Vue Router中启用了命名视图（Named Views）。

定义路由（需要配置）

为了使params正常工作，你可以在路由配置中使用:paramName语法来捕获参数。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', // 注意这里的:id是一个动态片段
      name: 'User',
      component: UserComponent
    }
  ]
});

传参

使用params参数时，你可以在路由跳转时通过params对象传递参数。但要注意，直接使用push或replace方法传递的params不会显示在URL中，除非你使用了命名视图或者在路由模式设置为history的情况下使用编程式导航。为了使它们显示在URL中，你可以这样做：

// 需要确保你的Vue Router使用的是history模式或者在路由定义中使用了命名视图等特定配置以使params生效在URL中。例如：
router.push({ name: 'User', params: { id: 123 } }); // 这样通常不会使params显示在URL中，除非有其他配置或使用history模式。

为了使params显示在URL中，你可以这样做：

// 使用history模式或在Vue Router配置中启用命名视图等特性。例如：
router.push({ path: '/user/123' }); // 这样可以直接在URL中看到/user/123。或者使用命名视图：https://router.vuejs.org/guide/essentials/named-views.html#passing-props-to-components-in-named-views

或者如果你使用的是命名视图并且希望使用params：

router.push({ name: 'User', params: { id: 123 } }); // 在某些情况下，这可能不会直接反映在URL中，除非使用了特定的配置或Vue Router版本更新支持了这种行为。通常建议直接使用path来确保URL的正确性。

对于大多数情况，如果你需要params显示在URL中，直接使用path可能是最简单和最明确的方法。如果确实需要使用history模式并且希望params显示在URL中，确保你的Vue Router实例是这样配置的：

const router = new VueRouter({
  mode: 'history', // 确保这是history模式
  routes: [/* ... */]
});

然后你可以通过path直接传递参数：

router.push('/user/123'); // 这样会在URL中显示/user/123。注意这里不需要使用params对象。