详细一点query 的接收方式
时间: 2023-08-14 16:02:46 浏览: 38
在 Vue 中,如果要在详情页面中获取上一个页面传递的参数,可以通过路由的 `query` 属性来传递参数。具体步骤如下:
1. 在上一个页面中使用 `$router.push()` 方法来跳转到详情页面,并传递需要显示的数据,例如:
```javascript
this.$router.push({
path: '/detail',
query: {
id: item.id,
title: item.title
}
})
```
在这里,我们使用了 `query` 属性来传递需要显示的数据。
2. 在路由配置中指定详情页面的路径和名称,例如:
```javascript
{
path: '/detail',
name: 'detail',
component: DetailComponent
}
```
3. 在详情页面中通过 `$route.query` 来获取传递的参数,例如:
```javascript
<template>
<div>
<h1>Detail Page</h1>
<p>{{ detail.title }}</p>
<p>{{ detail.content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
detail: {}
}
},
created() {
this.loadDetail()
},
methods: {
loadDetail() {
// 获取传递的参数
const { id, title } = this.$route.query
// 根据 id 加载对应的数据
// ...
this.detail = loadedData
}
}
}
</script>
```
这样就可以在详情页面中获取上一个页面传递的参数了。需要注意的是,在传递参数时,只有在使用 `$router.push()` 方法时才能使用 `query` 属性来传递参数,如果是使用 `<router-link>` 标签来跳转页面,则需要使用 `params` 属性来传递参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)