跳转传参方法
在Vue项目中，你可以使用路由（vue-router）来实现页面跳转并传递参数。下面是一些常用的方法：
使用路由的params属性：
- 1、在目标页面的路由配置中，设置
props: true来启用参数传递。 - 2、在源页面中，使用
this.$router.push方法跳转到目标页面，并传递参数。 - 3、在目标页面中，通过
this.$route.params获取传递的参数。
使用Vue的props属性：
- 1、在目标组件中定义props属性，用于接收传递的参数。
- 2、在源页面中，使用
this.$router.push方法跳转到目标页面，并在路由配置中设置props属性，将参数绑定到props上。 - 3、在目标组件中，通过props属性获取传递的参数。
使用Vuex进行状态管理：
- 在Vuex中定义一个状态（state），用于存储要传递的参数。
- 在源页面中，通过Vuex的mutations方法将参数添加到状态中。
- 在目标页面中，通过Vuex的getter方法获取传递的参数。
使用路由params属性的示例
下面是一个使用路由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>
接收页面传参数据的方法
在Vue项目中，可以使用以下方法接收页面传参数据：
1.使用props接收父组件传递的参数：
在子组件中定义props属性，接收父组件传递的参数。props属性需要使用v-bind绑定到父组件的对应属性上。
<template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script>
2.使用route对象获取路由参数：
在页面中使用route对象获取路由参数：在页面中使用route对象可以获取到路由参数，包括路径参数和查询参数。
<template> <div> <p>{{ $route.params.id }}</p> <p>{{ $route.query.name }}</p> </div> </template>
3.使用axios等
HTTP客户端发送请求时，在URL中添加参数：使用HTTP客户端发送请求时，可以在URL中添加参数，然后在请求成功后的回调函数中获取到这些参数。
<template> <div> <button @click="getData">获取数据</button> </div> </template> <script> import axios from 'axios' export default { methods: { getData() { axios.get('/api/data?id=123&name=test') .then(response => { console.log(response.data) }) } } } </script>
