background

If you use vue-Router in vUE project, you cannot avoid the choice of history mode, so how to select the appropriate history mode

Hash pattern

Hash mode is the default mode for vue-Router. The path is followed by a #, followed by the path. The path change does not trigger a page reload because of the # symbol

http://location:3000/#/page1
Copy the code

HTML 5 mode

This is a familiar pattern, where a path jump leads to the corresponding page. Vue is a single page. You need to configure the server to avoid this jump

The nginx server is configured with interception, which means that any address access from the current domain is matched to the default page

server
{
    location / {
        try_files $uri $uri/ /index.html
    }
}
Copy the code

Vue2 VuE3 Historical mode change

// vue2
const router = new Router({
    mode: 'history'
})

// vue3
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory()
})
Copy the code

There is no change in the two modes, mainly the change in writing. This reminds me of new Vue() instantiated to createApp() now

conclusion

  1. Hash mode adds an extra # to the URL
  2. HTML5 mode uses server configuration to intercept jumps to do the same as #

thinking

  1. The concept of two historical patterns
  2. Compare advantages and disadvantages