vue router如何使用query传递参数而不在地址栏显示
时间: 2024-01-21 09:02:04 浏览: 384
vue router带参数页面刷新或回退参数消失的解决方法
如果你想在Vue Router中使用查询参数传递参数,但不希望在地址栏中显示这些参数,可以使用编程式导航的方式来实现。
以下是使用编程式导航来传递查询参数但不显示在地址栏的示例代码:
```javascript
versionList(scope) {
const { id, imageId, name, tagsCount } = scope.row;
this.$router.push({
name: "versionList",
query: {
id,
imageId,
name,
tagsCount
}
});
}
```
在路由配置中,你可以继续使用`props: true`将查询参数作为组件的props传递。
```javascript
{
path: "/deploy/deployImage/VersionList",
props: true,
name: "versionList",
component: versionList
}
```
这样,查询参数会通过编程式导航方式传递给目标组件,但不会显示在地址栏中。
请注意,虽然查询参数不会在地址栏中显示,但它们仍然可以在目标组件中通过`this.$route.query`来访问。
这种方式适用于在Vue Router中使用查询参数进行传递,但不希望在地址栏中显示参数值的情况。
阅读全文