How to use routing to implement message passing between pages in Vue?

How to use routing to implement message passing between pages in Vue?

In Vue development, messaging between different pages is a common requirement. Vue routing provides a convenient way to implement message passing between pages. This article will introduce how to use Vue's routing to implement message passing between pages, and give detailed code examples.

1. Configure routing
First, we need to configure routing. In the Vue project, you can use the vue-router plug-in for routing management. Install vue-router via npm and introduce and use it in main.js. Suppose our project has two pages, Home and About.

// 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')

In the above code, we defined two routing rules, corresponding to the two components Home and About. Next, we can use the $route object in the component to obtain routing information, and use the this.$router.push() method to jump to the page.

2. Page jump
In the Vue component, you can jump to the page through the this.$router.push() method. We can pass the message that needs to be passed as routing parameters to the target page.

// 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>

In the above code, we define a message message in the Home component and provide a button to jump to the About page. Through the this.$router.push() method, we pass the message to the About page as a query parameter.

// 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>

In the About component, we use this.$route.query.message to get the message passed from the Home page and display it on the page. At the same time, we also provide a button that can return to the Home page after clicking it.

3. Summary
Through Vue’s routing function, we can easily implement message transfer between pages. When the page jumps, the message can be passed to the target page as a routing parameter, and the passed message can be obtained through the this.$route object in the target page.

This article uses a simple example to introduce how to use Vue's routing to implement message passing between pages. In actual development, we can use more advanced routing functions to meet our needs based on specific needs.

The above is the detailed content of How to use routing to implement message passing between pages in Vue?. For more information, please follow other related articles on the PHP Chinese website!