vue中html路由传参

在Vue中，可以通过路由传参来传递参数给HTML页面。有两种常用的方式：使用query和params。

1. 使用query传参：使用query可以在URL中传递参数。在路由配置中，可以通过设置路由的path和query来传递参数。例如，在路由配置中设置path为'/homeDetail'，并在跳转时携带参数'id'，可以使用如下代码：

<router-link :to="'/homeDetail?id=' + homeKey">{{listItem.title}}</router-link>

在子页面中，可以通过`this.$route.query`来获取URL中的参数。例如，在mounted钩子中，可以通过如下代码获取'id'参数：

mounted() {
  console.log(this.$route.query.id);
}

2. 使用params传参：params可以在路由之间传递参数，但需要在路由配置中定义参数名。例如，在A页中，可以使用如下代码传递参数'id'：

<router-link :to="{path:'/detail', query:{id:'1001'}}">到详情页</router-link>

在B页中，可以通过`useRoute`来获取路由参数。首先，需要引入`useRoute`函数：

import { useRoute } from 'vue-router'

然后，在组件中使用`useRoute`函数获取路由参数。例如，在B页中，可以通过如下代码获取'id'参数：

const route = useRoute()
console.log('route:', route.query.id)

以上就是Vue中使用HTML路由传参的方法。可以根据具体的需求选择适合的方式来传递参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue路由，路由传参（parmas,query）](https://blog.csdn.net/Xiaocong__/article/details/122932200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3路由及传参](https://blog.csdn.net/m0_69502730/article/details/126513513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]