What are the different modes of vue routing?

Vue routing has three modes: Hash, History, and Abstract. Differences: 1. The # character will appear in the URL path in hash mode, but not in other modes; 2. Changes in the hash value will trigger the hashchange event, but not in other modes; 3. The entire address in history mode is reloaded, and history records can be saved, which is convenient Forward and backward, other modes cannot.

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

There are actually three modes for vue routing:

• Hash: Use the hash value of the URL as the route. Supports all browsers.

• History: Since HTML5 History API and server configuration

• Abstract: Supports all javascript run modes. If it is found that there is no browser API, the routing will automatically force into this mode.

vue-router uses hash mode by default, that is, the following URL will appear:, the URL contains the

# We can use the following code to modify it into history mode:

import Vue from 'vue'
import Router from 'vue-router'
const userInfo = () => import('@/views/userInfo')
Vue.use(Router)

export default new Router({
  mode: 'history',//hash abstract
  routes: [
    {
      path: '/user-info/:userId',
      component: userInfo
    }
  ]
})

Difference

hash mode:

• The url path will have # characters

• The hash value is not included in the HTTP request. It is processed by the front-end routing, so it will not be refreshed when the hash value is changed. page, and will not send a request to the server

• Changes in the hash value will trigger the hashchange event

history mode:

• The entire address is reloaded, history records can be saved, and forward and backward are convenient

• Use HTML5 API (not supported by old browsers) and HTTP service End configuration, if there is no background configuration, 404

##nginx configuration will appear when the page is refreshed:

location / {
  try_files $uri $uri/ /index.html;
}

Route parameter retrieval

https://xxx.com//user-info/888 

this.$route.params.userId

https://xxx.com//user-info?userId=888

this.$route.query.userId

(Learning video sharing:

web front-end development, Basic programming video)

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