vue router如何使用query传递参数而不在地址栏显示

如果你想在Vue Router中使用查询参数传递参数，但不希望在地址栏中显示这些参数，可以使用编程式导航的方式来实现。

以下是使用编程式导航来传递查询参数但不显示在地址栏的示例代码：

versionList(scope) {
  const { id, imageId, name, tagsCount } = scope.row;
  this.$router.push({
    name: "versionList",
    query: {
      id,
      imageId,
      name,
      tagsCount
    }
  });
}

在路由配置中，你可以继续使用`props: true`将查询参数作为组件的props传递。

{
  path: "/deploy/deployImage/VersionList",
  props: true,
  name: "versionList",
  component: versionList
}

这样，查询参数会通过编程式导航方式传递给目标组件，但不会显示在地址栏中。

请注意，虽然查询参数不会在地址栏中显示，但它们仍然可以在目标组件中通过`this.$route.query`来访问。

这种方式适用于在Vue Router中使用查询参数进行传递，但不希望在地址栏中显示参数值的情况。

相关问题

vue router 怎么传递俩个参数

Vue Router 用于在 Vue.js 应用程序中管理路由，你可以通过不同的方式进行参数传递，特别是当你需要传递两个参数时。通常，有两种常见的方式：

1. **查询字符串**（Query Parameters）：
- 使用动态路由（Dynamic Segments）：例如，`/users/:userId/books/:bookId`。在这种模式下，`:userId` 和 `:bookId` 就会被视为动态参数，在浏览器地址栏中显示为 `/?userId=123&bookId=456`。
- 在路由对象中使用 `query` 对象：如 `{ name: 'bookDetail', path: '/detail/:id', query: { userId: '123', bookId: '456' } }`。

2. **路径片段参数**（Path Parameters）：
- 直接在路径中使用冒号前缀，如 `/users/John_Doe/books/JavaScript_Book?userId=123&bookId=456`，然后在对应的组件里通过 `$route.params` 获取这两个值。

在组件内部，你可以通过 `this.$route.query` 或 `this.$route.params` 来访问这些参数。记得在组件的生命周期钩子（如 `beforeRouteEnter` 或者 `mounted`）中获取它们。

// 示例代码
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.userId = to.query.userId;
      vm.bookId = to.params.bookId; // 如果是路径片段参数
    });
  },
  data() {
    return {
      userId: '',
      bookId: ''
    };
  }
};

router 地址栏隐藏query参数

要在路由中隐藏地址栏的查询参数，可以使用编程式导航（programmatic navigation）或使用路由参数替代查询参数。

1. 使用编程式导航：
在需要隐藏查询参数的地方，使用编程式导航将路由跳转到一个新的URL，但省略查询参数。这样就可以隐藏地址栏的查询参数。

   // 假设当前路由为 /example?param=value
   // 跳转到 /example，隐藏查询参数
   router.push({ path: '/example' });

2. 使用路由参数替代查询参数：
如果查询参数的值可以通过路由参数来表示，可以考虑将查询参数转换为路由参数，并在路由中使用路由参数来代替查询参数。

   // 假设当前路由为 /example?param=value
   // 修改路由配置，将查询参数转换为路由参数
   {
     path: '/example/:param',
     component: ExampleComponent
   }

在这种情况下，你可以通过路由参数来获取值，而不需要显示在地址栏中的查询参数。

请注意，以上方法是基于Vue Router的做法，如果你使用的是其他路由库或框架，具体实现方式可能会有所不同。