How to use routing to share data between pages in Vue?

How to use routing to share data between pages in Vue?

In the Vue framework, it is a very common requirement to use routing to share data between pages. Through routing, we can transfer data between different pages, allowing data to be shared between pages, improving development efficiency and user experience.

To achieve data sharing between pages, we first need to install Vue Router and introduce it into the project. Installing Vue Router can be completed with the following command:

npm install vue-router --save

Then, introduce Vue Router in the entry file of the project (usually the main.js file):

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Next, we need to Configure routing in the Vue instance. In routing configuration, we need to define routing rules, that is, the components and paths corresponding to each route. We can also define some global shared data in the routing configuration so that it can be accessed and shared in different pages.

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

const router = new VueRouter({
  routes
})

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

In the above code, we defined two routes: Home and About corresponding to two components respectively. In the Vue instance, we define a shared data sharedData, which can be accessed and shared in different pages.

Next, how to use this shared data in the component? We can access and modify this shared data through the $route object. The routing object $route contains the current routing information, including routing path, parameters, etc.

In the component, we can access the $route object through this.$route. For example, in the Home component, we can access and modify shared data in the following ways:

export default {
  mounted() {
    console.log(this.$route.sharedData) // 输出'Hello World'
  
    this.$route.sharedData = 'New Data'
    console.log(this.$route.sharedData) // 输出'New Data'
  }
}

Through the above code, we can see that accessing and modifying shared data in the Home component is very simple. We only need to access and modify it through this.$route.sharedData.

Similarly, shared data can also be accessed and modified in the About component through this.$route.sharedData. In this way, data can be shared and transferred between different components.

It should be noted that the sharing of $route objects is only valid within the same routing instance. In other words, if we access $route.sharedData in different routing instances, data sharing cannot be achieved.

To summarize, data sharing between pages can be easily achieved through routing. By defining shared data in the routing configuration, components can achieve data transfer and sharing by accessing and modifying the $route object. This method can improve development efficiency and user experience, and is a commonly used technology in the Vue framework.

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