How to use Vue Router to achieve interaction and communication between pages?

How to use Vue Router to achieve interaction and communication between pages?

Vue Router is the official routing management tool of Vue.js. It can help us build SPA (Single Page Application) applications and easily realize interaction and communication between pages. In this article, we will learn how to use Vue Router to implement interaction and communication between pages, and provide some code examples.

What is Vue Router?

Vue Router is an official routing manager based on Vue.js, used to implement routing functions in SPA applications. Through Vue Router, we can define routing rules and perform page jumps and component loading according to the rules.

Install and configure Vue Router

First, we need to install Vue Router through npm:

npm install vue-router

After the installation is complete, we need to introduce Vue into the entry file of the Vue project Router and perform basic configuration. As shown below:

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.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 first introduce Vue and VueRouter, and enable the Vue Router plug-in through Vue.use(VueRouter). Then, we define a routes array, which contains our routing rules.

When creating a Vue instance, we pass in the router object and use the <router-view></router-view> tag in the component to display the corresponding component.

Route jump

Vue Router provides two ways to implement route jump: declarative navigation and programmatic navigation.

Declarative Navigation

In templates, we can use the <router-link> tag to declaratively navigate to other pages. For example:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Programmatic navigation

If routing jumps are required in the method of the Vue instance, we can use the $router object to implement programmatic navigation. For example:

// 在某个方法中进行路由跳转
this.$router.push('/')
this.$router.push('/about')

Routing parameters

Sometimes, we need to dynamically generate routes based on certain parameters. Vue Router can implement this function through routing parameters.

Define routes with parameters

In routing rules, we can define routes with parameters by using colons. For example, we can define a route with a dynamic id:

const routes = [
  { path: '/user/:id', component: User }
]

Get route parameters

In the component, we can get it through this.$route.params Routing parameters. For example:

// 在User组件中获取路由参数
mounted() {
  console.log(this.$route.params.id)
}

Nested routing

Vue Router also supports the function of nested routing, allowing us to load other sub-components in a component. Through nested routing, we can build a multi-level component structure.

Define nested routes

In routing rules, we can use the children attribute to define nested sub-routes. For example:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'settings', component: UserSettings }
    ]
  }
]

Loading child components in components

In the template of the parent component, we can use the <router-view> tag to load the child component. The parent component will act as a container for the child component.

<template>
  <div>
    <h2>User</h2>
    <router-view></router-view>
  </div>
</template>

Communication between routes

In actual development, we often need to share and communicate data between different pages. Vue Router provides some mechanisms to implement communication between routes.

Routing parameters

As mentioned before, we can pass data through routing parameters to pass data between different pages. In the previous example, we used the user id as the routing parameter.

Routing hook

The routing hook function in Vue Router can help us perform some operations when switching routes, such as obtaining data or jump verification.

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在跳转前执行的操作
  next()
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 在跳转完成后执行的操作
})

In addition to global routing hooks, we can also use intra-component routing hooks in components. For example, define a beforeRouteEnter hook function in the component to perform verification operations before getting data.

const User = {
  beforeRouteEnter(to, from, next) {
    // 在获取数据之前进行验证操作
    next()
  }
}

Summary

Through the introduction of this article, we have learned how to use Vue Router to achieve interaction and communication between pages. We learned how to install and configure Vue Router, and provided code examples to demonstrate route jumps, route parameters, nested routes, and communication between routes. I hope this article will be helpful to you when using Vue Router!

The above is the detailed content of How to use Vue Router to achieve interaction and communication between pages?. For more information, please follow other related articles on the PHP Chinese website!