How to use routing in Vue to implement data transfer and state management between pages?

How to use routing to implement data transfer and state management between pages in Vue?

In Vue, routing (Router) is one of the core plug-ins for switching between pages. In addition to page jumps, routing can also be used to implement data transfer and status management. This article will introduce how to use Vue's routing plug-in (Vue Router) to realize data transfer and status management between pages, and provide corresponding code examples.

1. Basic use of routing

Vue Router is the official routing plug-in of Vue.js, which can realize routing management of single-page applications. First, we need to install Vue Router using npm and introduce the corresponding modules.

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 声明路由配置项
const routes = [
  {
    path: '/page1',
    component: Page1
  },
  {
    path: '/page2',
    component: Page2
  },
  // ...
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 创建Vue实例，并将路由实例注入
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

In the above code, first install the Vue Router plug-in through Vue.use(VueRouter). Then, declare the routing configuration items, where path represents the path of the page, and component represents the corresponding component. Finally, create a routing instance through new VueRouter() and inject it into the Vue instance.

2. Data transfer

To transfer data between pages, you can use routing parameters (params) or query parameters (query).

Use params to pass data:

// 跳转到page2页面时传递参数
router.push({ path: '/page2', params: { id: 1 } })

// 在page2页面中接收参数
export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}

Use query to pass data:

// 跳转到page2页面时传递参数
router.push({ path: '/page2', query: { id: 1 } })

// 在page2页面中接收参数
export default {
  mounted() {
    console.log(this.$route.query.id) // 输出1
  }
}

3. State management

In addition to data transmission , routing can also be used to implement simple state management. In Vue Router, this can be achieved by adding the meta field to the routing configuration item.

// 声明路由配置项
const routes = [
  {
    path: '/page1',
    component: Page1
  },
  {
    path: '/page2',
    component: Page2,
    meta: { requiresAuth: true } // 添加meta字段
  },
  // ...
]

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断是否需要认证
    if (!isAuthenticated()) {
      // 未认证，跳转到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      // 已认证，继续跳转
      next()
    }
  } else {
    next()
  }
})

In the above code, we added the meta: { requiresAuth: true } field to the routing configuration item of Page2, indicating that the page requires authentication. In the beforeEach hook function of the route, we make the authentication judgment. If the page requires authentication and is not authenticated, it will jump to the login page; if it has been authenticated or the page does not require authentication, it will continue to jump.

In this way, we can use Vue's routing plug-in to realize data transfer and status management between pages. Data can be passed to the target page through params and query and accessed in the target page. Simple status management can be achieved by adding meta fields to routing configuration items.

Summary

By using Vue Router, a powerful plug-in, we can easily implement routing management for single-page applications. By rationally utilizing routing parameters and query parameters, data transfer between pages can be achieved. At the same time, simple status management can be achieved by adding meta fields in routing configuration items. This provides us with convenience and flexibility in developing Vue applications.

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