this.$router.push({ path: "/goodsdetails", query: { id } });通过这种方式怎么在另一个页面那到传入的id
时间: 2024-02-20 09:56:50 浏览: 30
通过 `$router.push` 方法传递参数的方式,参数会被作为查询参数(query parameters)传递。在接收参数的页面中,你可以通过 `$route.query` 对象获取传递过来的参数。
例如,在 `/goodsdetails` 页面中,你可以使用以下方法获取传递过来的 `id` 参数:
```javascript
<template>
<div>
<h1>Goods Details: {{ goodsId }}</h1>
</div>
</template>
<script>
export default {
computed: {
goodsId() {
return this.$route.query.id
}
}
}
</script>
```
在这个例子中,我们使用了计算属性 `goodsId` 来获取传入的 `id` 参数,并在模板中显示出来。注意,这里我们使用的是 `$route.query.id` 而不是 `$route.params.id`,因为这里传递的参数是作为查询参数传递的,而不是路由参数。
相关问题
this.$router.push query type:this.clickActive
`this.$router.push` 方法可以用于导航到一个新的页面,并传递查询参数。如果你想传递一个名为 `type`,值为 `this.clickActive` 的查询参数,你可以这样使用:
```javascript
this.$router.push({ path: '/page', query: { type: 'this.clickActive' } })
```
这将导航到路径为 `/page` 的页面,并附带一个查询参数 `type`,其值为 `this.clickActive`。
请注意,`this.clickActive` 是一个字符串,它将作为查询参数的值传递给目标页面。如果你想传递变量的值,确保将其放在引号或模板字符串中,以便正确传递。
希望这回答了你的问题。如果还有其他疑问,请随时提出。
this.$router.push({path: this.$route.path, query})
这是一段 Vue.js 中的路由代码,用于跳转到当前页面并携带查询参数。其中,`this.$router.push` 表示进行路由跳转,`this.$route.path` 表示当前页面的路由路径,`query` 表示要携带的查询参数对象。这段代码的作用是将当前页面跳转到同一页面,并且将一些参数传递给该页面进行处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)