vue两个页面之间传值

在Vue中，可以通过props和$emit来实现组件之间的数据传递，也可以通过路由传参来实现页面之间的数据传递。

1. 使用props和$emit
在父组件中通过props向子组件传递数据，子组件通过$emit触发事件来向父组件传递数据。示例代码如下：

// 父组件中
<template>
<div>
<child :message="message" @update-message="updateMessage" />
</div>
</template>

<script>
import Child from './Child.vue';

export default {
components: {
Child
},
data() {
return {
message: 'Hello, Vue!'
}
},
methods: {
updateMessage(msg) {
this.message = msg;
}
}
}
</script>

// 子组件中
<template>
<div>
{{ message }}
<button @click="sendMessage">Send Message</button>
</div>
</template>

<script>
export default {
props: ['message'],
methods: {
sendMessage() {
this.$emit('update-message', 'Hello, World!');
}
}
}
</script>

2. 使用路由传参
在路由配置中通过params或query传递参数，另一个组件通过$route对象来获取参数。示例代码如下：

// 路由配置中
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}

// 页面中
<template>
<div>
{{ message }}
</div>
</template>

<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
this.message = this.$route.params.id;
}
}
</script>

在页面跳转时，可以通过this.$router.push方法来传递参数。

this.$router.push({ name: 'Detail', params: { id: 1 }})
或者
this.$router.push({ path: '/detail/1' })