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
<template>
<button @click="navigate">跳转到目标页面</button>
</template><script>
export default {
methods: {
navigate() {
const param1 = 'Hello';
const param2 = 'World';
this.$router.push({ path: '/target', params: { param1, param2 } });
}
}
}
</script>

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

// target.vue
<template>
<div>
<p>传递的参数1: {{ $route.params.param1 }}</p>
<p>传递的参数2: {{ $route.params.param2 }}</p>
</div>
</template>