vue两个页面之间传值

// App.vue
<template>
  <div id="app">
    <router-link to="/page1">Go to Page 1</router-link>
    <router-link to="/page2">Go to Page 2</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

// Page1.vue
<template>
  <div>
    <h1>Page 1</h1>
    <input v-model="message" placeholder="Enter message">
    <button @click="goToPage2">Go to Page 2 with message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    goToPage2() {
      this.$router.push({ path: '/page2', query: { message: this.message } })
    }
  }
}
</script>

// Page2.vue
<template>
  <div>
    <h1>Page 2</h1>
    <p>Message from Page 1: {{ message }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$route.query.message || 'No message received'
    }
  }
}
</script>

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/Page1'
import Page2 from '@/components/Page2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/page1',
      name: 'Page1',
      component: Page1
    },
    {
      path: '/page2',
      name: 'Page2',
      component: Page2
    }
  ]
})

解释说明：

1. App.vue：这是应用的主组件，包含两个路由链接和一个路由视图。
2. Page1.vue：第一个页面，用户可以在输入框中输入消息，并通过按钮跳转到第二个页面时将消息作为查询参数传递。
3. Page2.vue：第二个页面，通过 this.$route.query.message 获取从第一个页面传递过来的消息并显示。
4. router/index.js：配置了两个路由，分别对应 Page1 和 Page2 组件。

这种方式使用 URL 查询参数 (query) 来传递数据，简单且易于理解。如果你需要更复杂的数据传递方式（如 Vuex 状态管理），可以根据需求进行调整。