Get into the habit of writing together! This is the 4th day of my participation in the "Nuggets Daily New Plan·April Update Challenge", click to view the details of the event .

Vue-router pattern

topic

Vue 'hash' | 'history' | 'MemoryHistory（abstract）'- difference

Upgrade to v4

After the upgrade of Vue-router v4, it mode: 'xxx'is replaced with the form of API, but the function is the same

mode: 'hash'replace withcreateWebHashHistory()
mode: 'history'replace withcreateWebHistory()
mode: 'abstract'replace withcreateMemoryHistory()

PS: Personally, memorycalling is abstracteasier to understand than calling. The former is as the name suggests, and the latter is too abstract.

import { createRouter, createMemoryHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createMemoryHistory(),
  routes
})

export default router

复制代码

hash

// http://127.0.0.1:8881/hash.html?a=100&b=20#/aaa/bbb
location.protocol // 'http:'
location.hostname // '127.0.0.1'
location.host // '127.0.0.1:8881'
location.port // '8881'
location.pathname // '/hash.html'
location.search // '?a=100&b=20'
location.hash // '#/aaa/bbb'
复制代码

Features of hash

It will trigger a page jump, you can use the browser's "back" and "forward"
But will not refresh the page, support the necessary features of SPA
The hash will not be submitted to the server (so refreshing the page will also hit the current page, allowing the front end to process the route according to the hash)

The hash in the url will not be sent to the server. The front end onhashchangegets it and handles it by itself.

// 页面初次加载，获取 hash
document.addEventListener('DOMContentLoaded', () => {
    console.log('hash', location.hash)
})
// hash 变化，包括：
// a. JS 修改 url
// b. 手动修改 url 的 hash
// c. 浏览器前进、后退
window.onhashchange = (event) => {
    console.log('old url', event.oldURL)
    console.log('new url', event.newURL)

    console.log('hash', location.hash)
}
复制代码

H5 history API

Two commonly used APIs

history.pushState
window.onpopstate

When the page is refreshed, the server needs to do processing , please refer to the documentation . . That is, no matter what url accesses the server, the page must be returned.

According to the url specification, different urls correspond to different resources, for example:

https://github.com/server Return to the home page
https://github.com/username/server returns the user page
https://github.com/username/project1/server back to project page

But using SPA's front-end routing changes this rule, if github uses it:

https://github.com/server Return to the home page
https://github.com/username/The server returns to the home page, and the front-end routing jumps to the user page
https://github.com/username/project1/The server returns to the home page, and the front-end routing jumps to the project page

Therefore, from the developer's implementation point of view, front-end routing is a form of violation of the rules. But users who don't care about the back-end and only care about the front-end pages, or browsers, prefer pushStatethis approach.

The difference between the three modes

hash - use url hash changes to record routing addresses
history - Use H5 history API to change url record routing address
abstract - do not modify the url, the routing address is in memory, but the page refresh will return to the home page .

Serial Question: How many modes does react-router have?

react-router has three modes, the design is the same as vue-router

Front-end depth - the difference between hash | history | abstract in Vue-router mode