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, thecreateRouter()function can accept a configuration object, including two properties:historyandroutes. Among them,historyis used to specify the routing mode, androutesis 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 usepathandcomponentto 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/:idindicates that the path can match a Dynamic parameters, we can pass dynamic parameters as component properties to the routing component through thepropsattribute.

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 namedLayout# 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

• 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.

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

• 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.

Inject routing

createAppfunction. 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');

createAppfunction to create a Vue instance. , and inject the routing instancerouterinto the Vue instance through theusemethod.

Route jump

router.pushmethod.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'; Home About Contact

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

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!