Two modes of routing in vue and their implementation principles

Vue.js is a popular front-end framework that enables the development of single-page applications (SPA) through its excellent routing management module. The Vue routing management module (Vue Router) has two modes: History mode and Hash mode. In this article, we will detail how these two patterns are implemented and how to use them in Vue.

1. The concept of routing mode

In traditional multi-page application development, each page has its own URL address, and users will request different pages when accessing different URL addresses. In a single-page application, all pages are displayed in the same HTML page. The user's jump will not cause the page to be reloaded, but the page will be switched through JavaScript. In the process of page switching, the Vue routing management module plays an important role.

Routing mode refers to the method used by the URL address during transmission. According to its difference, we can divide the routing mode into two types: Hash-based Routing mode and History-based Routing mode.

2. Hash mode

Hash mode is the default routing mode of Vue Router, and its implementation principle is very simple. The hash refers to the # sign in the URL, which is the anchor point we often see.

In hash mode, the # sign in the URL is followed by the path of the page, such as http://www.example.com/#/home, where /#/home is the path of the page. When the user jumps in the page, Vue Router will display the path of the new page in the URL by changing the hash part, thereby realizing page switching. It will not trigger page reloading, but through routing switching. Render a new page.

The advantage of using hash mode is that it can avoid URL duplication, because the hash part will not be sent to the server, but will be switched on the front end. However, this also brings some side effects, such as affecting SEO in search engines and causing URL irregularities.

3. History Mode

Historical mode uses the API in HTML5, which uses the window.history.pushState API, window.history.replaceState API and popstate event. In this mode, Vue Router will add the URL of the current page to the history stack and implement route switching by operating the stack. When the user clicks the browser's back button, Vue Router listens to the popstate event through the event listening mechanism and returns to the previous URL address. The following is sample code:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

It should be noted here that if you choose to use historical mode, you need to set the server configuration appropriately. Because in this mode, when the accessed URL is not the path to a static resource on the server, a 404 error will be returned.

4. Switching of routing modes

When using Vue Router to develop single-page applications, we can switch the routing mode through the following two methods:

1. Set the mode attribute in the routing module. The sample code is as follows:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2. Implemented by setting the historyApiFallback attribute in the vue.config.js file when the project is built. The following is a sample code:

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

It should be noted here that when setting the routing mode, it needs to be tested and verified in the server environment to ensure that the routing function can operate normally.

5. Summary

Vue Router is an important part of Vue.js and can realize front-end routing management of single-page applications. According to the method used by the URL address in the transmission process, it is divided into hash mode and historical mode. Each has its own advantages and disadvantages, and developers need to choose according to actual needs. When using Vue Router for single-page application development, you need to set the routing mode appropriately and test and verify it in the server environment to ensure that the routing function can run normally.

The above is the detailed content of Two modes of routing in vue and their implementation principles. For more information, please follow other related articles on the PHP Chinese website!