What is routing?

There are two types of routes:

  • Front-end route: Mapping between Hash addresses and components

  • Back-end routing: a mapping between the browser request address + request mode and back-end business logic

SPA and front-end routing:

SPA (single-page Web Applications) refers to a Web site that has only one HTML page, and all the display and switching of components are completed in this Single page. In this case, switching between different components needs to be realized through the front-end path

Vue-router works

Vue-router implements front-end routing through hash and History interface. Updating the view without re-requesting the page is one of the core principles of front-end routing. Currently, there are two main ways to implement this function in the browser environment:

  • Use the hash (” # “) in the URL
  • Take advantage of the History Interface new method in HTML5

In vue-Router, it provides a mode parameter to determine which mode to use:

  • The default hash
  • Manually set this parameter to history

Router /index.js file code

So, what’s the difference?

1. Mode: ‘hash’, more ‘#’ in URL

  • Vue-router is in hash mode by default. It uses the HASH of URL to simulate a complete URL. When the URL changes, the page is not reloaded. # is a hash symbol, which is called a hash character or anchor point. The value after the hash symbol is called a hash value.

  • The hash mode of the route is implemented by using the window to listen for the onHashChange event, that is, the hash value is used to guide the browser action, has no effect on the server, HTTP requests do not include the hash value, and every time the hash value changes, Will add a record to the browser’s access history, use the “back” button to go back to the previous location. Therefore, the hash mode changes based on the hash value, rendering different data for the specified DOM position based on different values.

2.mode:’history’

  • Hash mode urls contain hash signs, which affect the appearance of the URL, while history mode does not. This mode makes full use of history.pushState() to jump to the URL without reloading the page. If the history mode is used, you need to add mode:’history’ to the routing rule configuration.