vue3 路由跳转传参

在Vue3中，可以使用三种方式进行路由跳转传参：通过params、query和动态路由。

1. 通过params进行传参：
在跳转前，使用`router.push`方法，并在`params`对象中指定参数名和对应的值。例如：

function acty() { 
  router.push({ 
    name: 'tiaozhn', 
    params: { 
      id: "aaa" 
    } 
  }) 
} 

在目标组件中，可以通过`$route.params`来获取传递的参数。例如：

console.log($route.params.id);

这样就可以获取到传递的参数值。

2. 通过query进行传参：
在跳转前，使用`router.push`方法，并在`query`对象中指定参数名和对应的值。例如：

function acty() { 
  router.push({ 
    path: '/tiaozhn', 
    query: { 
      som: "Aaa" 
    } 
  }) 
} 

在目标组件中，可以通过`$route.query`来获取传递的参数。例如：

console.log($route.query.som);

这样就可以获取到传递的参数值。

3. 使用动态路由进行传参：
在跳转前，可以通过在路径中添加参数来进行传参。例如：

function acty() { 
  var id = 1; 
  proxy.$router.push('/tiaozhn/' + id) 
} 

在目标组件中，可以通过`$route.params`来获取传递的参数。例如：

console.log(proxy.$route.params.id);

这样就可以获取到传递的参数值。

总结：在Vue3中，可以使用params、query和动态路由这三种方式进行路由跳转传参，根据需求选择合适的方式即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [VUE3 跳转传参的三种方式](https://blog.csdn.net/qq_54602808/article/details/119789250)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]