Detailed explanation of routing functions in Vue3: implementing routing jumps for SPA applications

Vue3 is the latest Vue version, and its routing function has undergone major changes compared to the Vue2 version. As one of the important tools for implementing single page applications (SPA), routing functions in Vue3 are widely used. In this article, we will explain the routing function in Vue3 in detail, including routing jumps and their implementation.

1. Introduction to Vue3 routing function

The routing function in Vue3 mainly consists of two parts: routing instance and router. Among them, the routing instance is a Vue Router instance, which is used to define routes and their jump paths; and the router is responsible for injecting the routing instance into the Vue instance to make it effective and enable routing jumps.

2. Routing instance

1. Creating a routing instance

In Vue3, we can create a routing instance by calling the Vue Router function. The sample code is as follows :

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

In the above code, the createRouter() function can accept a configuration object, including two properties: history and routes. Among them, history is used to specify the routing mode, and routes is used to define the routing table.

2. Routing table definition

The routing table is composed of an array of routing configuration objects. Each object in the array represents the definition of a route, including the following attributes:

• path: routing path;
• component: routing component;
• name : Route name;
• meta: Routing meta information.

In the routing table, we can use path and component to define routing paths and routing components. The sample code is as follows:

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

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

The routing path can use placeholders to represent dynamic parameters. The sample code is as follows:

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

In the above example, the colon in the routing path /user/:id indicates that the path can match a Dynamic parameters, we can pass dynamic parameters as component properties to the routing component through the props attribute.

3. Nested routing

In Vue3, we can use nested routing to organize the routing structure of the application. Nested routing refers to the situation where the routing path contains multiple levels. The sample code is as follows:

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: '/about',
          component: About
        },
        {
          path: '/contact',
          component: Contact
        }
      ]
    }
  ]
})

In the above example, we defined a path named Layout# under the / path. ##'s routing component and use it as the parent path of the nested route. LayoutThere are three sub-routes in the component, corresponding to different paths.

Route guard

Route guard is used to perform some logical operations before or after route jump. In Vue3, routing guards are mainly divided into three categories: global guards, routing guards and component guards.

There are three types of global guards:

• beforeEach: execute logic before routing jump;
• beforeResolve: After route parsing is completed, the logic is executed before route matching;
• afterEach: The logic is executed after route jump.

Route guards are divided into two types:

• beforeEnter: logic executed before entering the route;
• beforeLeave: Logic executed before leaving the route.

Component guards are for component-level routing, including the following:

• beforeRouteEnter: The logic executed before the component enters the route;
• beforeRouteUpdate: The logic executed before the component updates the route;
• beforeRouteLeave: The logic executed before the component leaves the route.

3. Router

Inject routing

After creating the routing instance, we need to inject it into the Vue instance so that takes effect. In Vue3, we can create a Vue instance by calling the

createApp function. The sample code is as follows:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

In the above code, we use the

createApp function to create a Vue instance. , and inject the routing instance router into the Vue instance through the use method.

Route jump

In Vue3, we can implement route jump by calling the

router.push method. router.pushThe method accepts a parameter to specify the routing path that needs to be jumped. The sample code is as follows:

import { RouterLink } from 'vue-router';

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/contact">Contact</RouterLink>

In the above example, we use the

c3eee9878978ade0d6491433c64180cf component instead of the b988a8fd72e5e0e42afffd18f951b277 component in the Vue2 version, using To implement route jump.

The above is a detailed explanation of the routing function in Vue3, including the use of routing instances and routers and the implementation of routing jumps. Through studying this article, I believe you have a better understanding of the routing function in Vue3.

The above is the detailed content of Detailed explanation of routing functions in Vue3: implementing routing jumps for SPA applications. For more information, please follow other related articles on the PHP Chinese website!