How vue-router implements routing jumps and page rendering

Vue-router is the official routing management tool of Vue.js. It supports building single-page applications (SPA) based on Vue.js. The routing function it provides allows us to control page jumps by managing the path in the URL. and display.

This article will focus on the underlying implementation principles of Vue-router and analyze how Vue-router implements routing jumps and page rendering.

1. Basic use of Vue-router

To use Vue-router, we need to perform the following steps:

1. Install Vue-router and Vue.js

npm install vue-router

2. Create a Vue instance

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

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

new Vue({
    router,
    el: '#app',
    template: '<App/>',
    components: { App }
});

In the above code, we use the Vue.use() method to register Vue-router, create a routing instance, and add It is provided as an option for Vue instances, allowing Vue instances and every component of the entire application to use Vue-router.

At the same time, in the routing instance, we define two routing objects, each routing object consists of three attributes:

• path: path, specifying this routing object The corresponding URL path;
• name: route name, which is different from the component name. It is a name for convenience and can be called with the $router.push() and $router.replace() methods;
• component: component, the component corresponding to the current route.

In the Vue component, we can use the $router and $route objects to perform routing-related operations:

• $router: used to jump to another Routing;
• $route: used to obtain current routing information.

2. The implementation principle of Vue-router

The basic principle of Vue-router to implement route jump and page rendering:

1. Listen to URL changes

Vue-router monitors URL changes and displays different pages based on different URLs.

In terms of data binding, Vue.js internally encapsulates the Object.defineProperty() method, which realizes two-way binding of data. However, Vue.js has no way to change the URL. Therefore Vue-router needs a new way to monitor URL changes.

Vue-router uses H5's routing API - history.pushState(state, title, url) and history.replaceState(state, null, url) to monitor URL changes. When the URL changes, Vue-router will trigger the internal routing change mechanism and use the current URL to deduce the component that needs to be rendered.

2. Matching routing rules

Vue-router will determine whether the route is forward or backward by comparing the previous URL with the next URL when the route changes, and then Call different methods to display different views.

Inside Vue-router, routing rules will be parsed into routing records. Each routing record contains a URL path and corresponding component information. These routing records are stored in the internal routing table.

When the URL changes, Vue-router will search for a routing record matching the current URL path from the routing table by matching the URL path. If it exists, it means that the URL path is legal, and then parses out the component that needs to be rendered. .

3. Rendering component

If a legal routing rule is matched, Vue-router will use the component defined in the routing rule to render the page that needs to be displayed.

When rendering components, the main idea of ​​Vue-router is to mount the component to be rendered on a RouterView component. When the route changes, the RouterView component will render the corresponding information based on the current route record information. s component.

Vue-router also provides some route navigation APIs, such as $router.push() and $router.replace(), which are used to jump and replace routes in components.

3. Summary

Vue-router, as the official routing management tool of Vue.js, can help us quickly build single-page applications. The underlying implementation principle of Vue-router is mainly implemented by monitoring URL changes, matching routing rules and rendering components. Vue-router internally encapsulates the routing change mechanism, which can determine whether to move forward or backward based on changes in the URL, and display the corresponding view. At the same time, Vue-router provides a convenient API for routing jumps and replacements in Vue components. Mastering the principles and usage of Vue-router can help us better build single-page applications and improve our front-end development capabilities.

The above is the detailed content of How vue-router implements routing jumps and page rendering. For more information, please follow other related articles on the PHP Chinese website!