Two working modes of VueRouter

1. For a url, what is the hash value? —— # and the content after it is
an example of hash value:
http://localhost:5005/#/home/message

2. The hash value will not be included in the HTTP request, that is: the hash value will not be brought to the server.

① Deployment example in hash mode:

Refreshing or re-entry does not affect the page after reaching any routing path.

② Histroy mode deployment example:

fromhashmode changed tohistorymodel

in src/router/index.js

const router = new VueRouter({
    
    
// 把模式改成 'history' 重新运行打包即可
  mode: 'history',
  routes: [...]
})

Redeploy to the server.

This happens because in the history mode, the following paths will be used as resources to request the server, and the server will report a 404 error if it does not.

Solving this problem requires help from backend people. Here are one of several solutions:

• connect-history-api-fallback

• Search for connect-history-api-fallback in NPM

• Install the following command in the server

cnpm install --save connect-history-api-fallback

• Introduce the following code in node

const history = require('connect-history-api-fallback');

// 必须在引入静态资源之前使用history
app.use(history())

• redeploy run

• hash mode:

  • 1. There is always a # sign in the address, which is not beautiful.
  • 2. If the address is shared through a third-party mobile app in the future, if the app checks strictly, the address will be marked as illegal.
  • 3. Good compatibility.

• history mode:

  • 1. The address is clean and beautiful.
  • 2. Compared with the hash mode, the compatibility is slightly worse.
  • 3. When the application is deployed online, it needs the support of the back-end personnel to solve the problem of refreshing the page server 404.

The complete code of the example in this article: Gitee:[email protected]:hebe0330/vue_route_guards.git