vue路由跳转传递参数

在Vue中，可以使用路由跳转时传递参数的方式有多种，下面我会介绍其中两种常用的方法：

1. 使用动态路由参数：
在Vue的路由配置中，可以定义动态的路由参数，然后在路由跳转时将参数传递给目标组件。例如，在路由配置中定义一个动态参数，比如:id，然后在跳转时通过在路径中添加对应的值来传递参数。示例代码如下：

   // 定义路由配置
   const routes = [
     {
       path: '/user/:id',
       name: 'User',
       component: User
     }
   ];
   
   // 跳转时传递参数
   this.$router.push({ name: 'User', params: { id: userId } });

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

   export default {
     mounted() {
       const id = this.$route.params.id;
       // 使用id参数进行相应的操作
     }
   }

2. 使用查询参数：
另一种常用的方式是使用查询参数来传递参数。在路由跳转时，可以通过`query`选项传递参数。示例代码如下：

   // 跳转时传递参数
   this.$router.push({ path: '/user', query: { id: userId } });

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

   export default {
     mounted() {
       const id = this.$route.query.id;
       // 使用id参数进行相应的操作
     }
   }

这两种方法可以根据具体的需求选择使用，使用动态路由参数可以在URL中显示参数，而使用查询参数则不会改变URL路径。