What are the vue routing modes?

Vue routing modes include: 1. Hash mode, which uses the hash value of the URL as the route and supports all browsers; the "#" character will appear in the URL path. 2. History mode, which relies on HTML5 API (not supported by old browsers) and HTTP server configuration. Without background configuration, 404 will appear when the page is refreshed. 3. Abstract mode, suitable for all JavaScript environments, if there is no browser API , the router will be automatically forced into this mode.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Routing mode analysis

Here we will talk about the routing mode of vue-router. The first thing to understand is that routing is composed of multiple URLs, and different URLs are used. You can navigate to different locations accordingly. If you have done server development or have some understanding of the http protocol, you will know that access to the page in the browser is stateless, so we will re-request when switching to different pages. If you actually use vue and vue-router for development, you will understand that when switching pages, there is no re-request or re-refresh of the page. It looks like the page is stateful. What is the reason? This is actually achieved with the help of the browser's History API, which allows the page to jump without refreshing, and the status of the page is maintained in the browser.

1. Hash mode

Use the hash of the URL to simulate a complete URL, so when the URL changes, the page will not be reloaded, and the network displayed will There will be a "#" sign in the path, which is a little ugly. This is the most secure mode because it is compatible with all browsers and servers.

1-Features: The hash mode url address has '#'

 <a href=&#39;#/aaa&#39;>1(#/aaa)</a>

where #/aaa is our hash value, and The hash value will not be passed to the server

2-Principle of implementation:

The native hashChange event is mainly to monitor hash value changes through eventswindow. onHashChange=function(){}

3-Refresh the page:

No request will occur, the page will not have any problems, no backend is required It matches

and the hash mode has better compatibility. However, because it contains '#', its beautiful rows are not as good as the history mode.

2. History mode

The beautified hash mode will remove the "#" in the path. It relies on the history and pushState API of Html5, so you don't have to worry about IE9 and later versions. It also includes three methods: back, forward, and go, which correspond to the browser's forward, backward, and jump operations. It is the operation performed by the forward and back buttons in the upper left corner of the browser. [Learning video sharing: vue video tutorial, web front-end video]

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

But history also has shortcomings. If you are not afraid of forward and backward jumps, you are afraid of refreshing (if If the backend is not prepared), because the refresh is actually requesting the server.

To summarize

#1: Hash mode (vue-router default mode URL followed by #) uses the hash value of the URL as the route. Supports all browsers; Disadvantage: You can only change the # following to achieve route jump.
2: History mode (change to history mode through mode: 'history') HTML5 (BOM) History API and server configuration shortcomings: fear of refresh. If the backend does not handle this situation, the front-end refresh is a real request. The server consumes a lot of time and is very slow.

3. Abstract mode

Abstract is the third mode in vue routing. It is used to act as fallback in environments that do not support browser APIs. Whether it is hash or history mode, it will have an effect on the URL on the browser. The general function it wants to achieve is to embed other routing pages in the existing routing page, and keep the routing of the current page displayed in the browser. path, this is the abstract routing mode that is separated from the browser.

Applicable to all JavaScript environments, such as using Node.js on the server side. Without the browser API, the router will automatically be forced into this mode.

Then switch here

const router = new VueRouter({routes, mode:'hash|history|abstract',})

.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of What are the vue routing modes?. For more information, please follow other related articles on the PHP Chinese website!