二月花

Appearance

Vue-router 模式 ​

题目 ​

Vue-router 模式 'hash' | 'history' | 'abstract' 的区别

v4 的升级 ​

Vue-router v4 升级之后，mode: 'xxx' 替换为 API 的形式，但功能是一样的

  • mode: 'hash' 替换为 createWebHashHistory()
  • mode: 'history' 替换为 createWebHistory()
  • mode: 'abstract' 替换为 createMemoryHistory()

PS：个人感觉，叫 memory 比叫 abstract 更易理解，前者顾名思义，后者就过于抽象。

hash ​

js
// 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'

hash 的特点

  • 会触发页面跳转，可使用浏览器的“后退” “前进”
  • 但不会刷新页面，支持 SPA 必须的特性
  • hash 不会被提交到 server 端（因此刷新页面也会命中当前页面，让前端根据 hash 处理路由）

url 中的 hash ，是不会发送给 server 端的。前端 onhashchange 拿到自行处理。

js
// 页面初次加载，获取 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 ​

常用的两个 API

  • history.pushState
  • window.onpopstate

页面刷新时，服务端要做处理，可参考文档。。即无论什么 url 访问 server ，都要返回该页面。

按照 url 规范，不同的 url 对应不同的资源，例如：

  • https://github.com/ server 返回首页
  • https://github.com/username/ server 返回用户页
  • https://github.com/username/project1/ server 返回项目页

但是用了 SPA 的前端路由，就改变了这一规则，假如 github 用了的话：

  • https://github.com/ server 返回首页
  • https://github.com/username/ server 返回首页，前端路由跳转到用户页
  • https://github.com/username/project1/ server 返回首页，前端路由跳转到项目页

所以，从开发者的实现角度来看，前端路由是一个违反规则的形式。 但是从不关心后端，只关心前端页面的用户，或者浏览器来看，更喜欢 pushState 这种方式。

代码参考 history-api.html

html
待补充

三种模式的区别 ​

  • hash - 使用 url hash 变化记录路由地址
  • history - 使用 H5 history API 来改 url 记录路由地址
  • abstract - 不修改 url ，路由地址在内存中，但页面刷新会重新回到首页。

连环问：react-router 有几种模式？ ​

react-router 有三种模式，设计上和 vue-router 一样