vu2 params 传参

在Vue.js中，可以使用params传参来实现路由跳转并携带参数的功能。首先，在配置路由时，需要声明接收params参数的路由。可以使用to对象写法或者to字符串写法来传递参数。使用to对象写法时，需要在路由配置中给每个路由设置一个name，然后在跳转时使用该name和params来传递参数。使用to字符串写法时，可以使用模板字符串来拼接参数并在路由跳转时传入。

使用params传参的示例代码如下：

1. 配置路由：

const routes = [
  {
    name: "chuancan",
    path: 'zhanshi/:id/:title',
    component: Zhanshi,
    meta: { title: "传参" },
  }
]

2. 传递参数：

<!-- to字符串写法 -->
<router-link :to="`/search/home/zhanshi/${item.id}/${item.title}`">{{ item.title }}</router-link>

<!-- to对象写法 -->
<router-link :to="{ name: 'chuancan', params: { id: item.id, title: item.title }}"></router-link>

另外，还可以使用query传递参数。使用query传递的参数会显示在URL后面，可以通过this.$router.push方法来实现路由跳转，并在其中指定query的值。

使用query传参的示例代码如下：

this.$router.push({ path: '/describe', query: { id: id } })

总结来说，使用params传参时需要在路由配置中声明接收参数的路由，并使用to对象写法或to字符串写法来传递参数。使用query传参时，可以通过this.$router.push方法来指定query的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue2路由 传参之params](https://blog.csdn.net/qq_45272615/article/details/124914375)[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* *3* [vue动态路由传参](https://blog.csdn.net/weixin_52339077/article/details/125474967)[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 ]