vue项目中页面跳转传参的方法

在Vue项目中，你可以使用路由（vue-router）来实现页面跳转并传递参数。下面是一些常用的方法：

1. 使用路由的params属性：

   • 在目标页面的路由配置中，设置props: true来启用参数传递。
   • 在源页面中，使用this.$router.push方法跳转到目标页面，并传递参数。
   • 在目标页面中，通过this.$route.params获取传递的参数。

2. 使用Vue的props属性：

   • 在目标组件中定义props属性，用于接收传递的参数。
   • 在源页面中，使用this.$router.push方法跳转到目标页面，并在路由配置中设置props属性，将参数绑定到props上。
   • 在目标组件中，通过props属性获取传递的参数。

3. 使用Vuex进行状态管理：

   • 在Vuex中定义一个状态（state），用于存储要传递的参数。
   • 在源页面中，通过Vuex的mutations方法将参数添加到状态中。
   • 在目标页面中，通过Vuex的getter方法获取传递的参数。

下面是一个使用路由params属性的示例：

在目标页面的路由配置中设置props: true：

// router.js
{
path: '/target',
component: TargetComponent,
props: true // 启用参数传递
}

在源页面中使用this.$router.push方法跳转到目标页面并传递参数：

// source.vue

在目标页面中使用this.$route.params获取传递的参数：

// target.vue