How to use routing functions in Vue documentation

Vue is a popular JavaScript framework that uses a number of front-end technologies and concepts, including components, state management, and routing capabilities. For a SPA (Single Page Application) application, routing is a very important part. Vue Router provides an easy way to manage application routing, which allows us to define routes and their corresponding components in the application. This article will introduce how to use routing functions in Vue documents.

Install Vue Router

Before we start using Vue Router, we need to install it. Install Vue Router through npm:

$ npm install vue-router

Basic structure of Vue Router

In Vue, a route is the correspondence between a URL address and a component. The following is the basic structure of Vue Router:

const router = new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] })

Using the officially provided constructor VueRouter, we can create a new routing instance. In this example, we define routing patterns and routing rules. There are two routing modes, one is hash mode and the other is history mode. Here we choose history mode. Routing rules are divided into multiple routes, each route has a path (path), name (name) and corresponding component (component).

Rendering method of routing

To use routing in a Vue application, we need to first set up a router-view component to host the corresponding part of the routing. Based on the path matching between the component location and routing rules, Vue will automatically render the correct component to the corresponding location. As shown below:

In this example, the routing component will be displayed in the router-view component.

Using dynamic parameters

Sometimes, we need to use dynamic parameters in routing. For example, in a blog application, we need to get the article content by article ID. In the backend, the URL will have a dynamic article ID parameter, such as "/blog/123", where 123 is the article ID. In Vue, we can use routing rules to set dynamic parameters:

const router = new VueRouter({ mode: 'history', routes: [ { path: '/blog/:id', name: 'blog', component: Blog } ] })

In this example, we define a routing rule with dynamic parameters. Parameters start with a colon, such as ":id". When "/blog/123" is matched, "123" will be a dynamic parameter. At the same time, it is also very easy to use this parameter in the component:

export default { data () { return { postId: null } }, created () { this.postId = this.$route.params.id // 根据post id获取文章 } }

In the component instance, the parameters can be obtained through this.$route.params.id.

Programmatic Navigation

At the beginning of the chapter, we created a Vue Router instance. Using this example, we can implement routing switching programmatically. Vue Router provides two methods to implement programmatic navigation: $router.push() and $router.replace().

In the above example, there are two routing buttons, each connected to a different route. By routing the click event of the button, we can use $router.push() in the underlying JavaScript to navigate to a specific route:

Navigation Guards

When routing is switched, we may Some operations need to be performed, such as authorization, loading data, etc. Vue Router provides Navigation Guards to solve this problem. Navigation Guards are a bunch of functions that can be executed when a route is navigated, such as before, after, or when jumping to a route. Vue Router provides three types of Navigation Guards: global Guard, component Guard and routing Guard.

Global Guard

Global Guard is a Guard defined in the entire application and takes effect on all pages. Vue Router provides some global guards, including:

• beforeEach(to, from, next): executed before entering the route.
• afterEach(to, from): Executed after the route enters.

Component Guard

Component Guard is a Guard defined within a component and is executed when entering the component. Vue Router provides the following component Guard:

• beforeRouteEnter(to, from, next): Executed before entering the component, the component instance cannot be accessed.
• beforeRouteUpdate(to, from, next): Executed when the route is updated and can access the component instance.
• beforeRouteLeave(to, from, next): Executed when leaving the component, you can access the component instance.

Routing Guard

Routing Guard is a Guard defined when the route is defined and takes effect in a specific route. Vue Router provides the following routing Guard:

• beforeEnter(to, from, next): Executed before entering the route, it only takes effect on this route.
• beforeResolve(to, from, next): Executed when the route enters, and can access the component instance.

Summary

Routing is a very important part of the Vue application, and Vue Router provides us with a simple way to manage routing. In this article, we introduced the basic structure, rendering method, dynamic parameters, programmatic navigation and Navigation Guards of Vue Router. Vue Router is a powerful and easy-to-use routing library. If you want to extend your Vue application, be sure to refer to the API provided in these documents.

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