Vue中如何使用路由实现页面间的消息传递？

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// Home.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="gotoAbout">Go to About</button>
  </div>
</template>

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

// About.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="goBack">Go Back</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  mounted() {
    this.message = this.$route.query.message
  },
  methods: {
    goBack() {
      this.$router.push('/')
    },
  },
}
</script>