Vue-router 中 hash 和 html5 两种路由监听方式

vue-router 的两种路由方式
- hash 模式
- HTML5 模式
不同模式的路由监听方式
- hash 模式监听方式
- HTML5 模式监听方式
手写vue-router核心逻辑
- Vue.use()
- router-link和router-view全局组件
- 路由点击并跳转核心代码
代码

vue-router 的两种路由方式

如果你用过 Vue，那你一定知道 vue-router，它给开发者提供了两种路由方式

hash 模式

hash 模式是用 createWebHashHistory() 创建的：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

HTML5 模式

用 createWebHistory() 创建 HTML5 模式路由：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

不同模式的路由监听方式

这两种不同模式的路由方式，它们对路由的监听方式也不同

hash 模式监听方式

hash 路由的特点

# 号后面的就是 hash 的内容
可以通过 location.hash 拿到
可以通过 onhashchange 监听 hash 的改变

window.addEventListener('hashchange'，, () => {
	console.log('触发 hash 路由变化')
})

HTML5 模式监听方式

HTML5 路由的特点

history 即为正常路径
可以通过 location.pathname 拿到路由路径
history.go、history.back、history.forward 通过监听 onpopstate 事件来进行路由劫持
pushState、replaceState 需要通过函数重写的方式进行劫持

window.addEventListener('popstate'，, () => {
	console.log('触发 popstate 路由变化')
})

const rawPushState = window.history.pushState
window.history.pushState = (...args) => {
	rawPushState.apply(window.history, args)
	console.log('劫持到 pushState 变化了')
}

const rawReplaceState = window.history.replaceState
window.history.replaceState = (...args) => {
	rawReplaceState.apply(window.history, args)
	console.log('劫持到 replaceState 变化了')
}

手写vue-router核心逻辑

Vue.use()

下面是 vue 源码

在这里插入图片描述
这里我们来测一下

function a() {
  console.log(100)
}
Vue.use(a) // 执行结果为 100

function a() {
  console.log(100)
}
a.install = function () {
  console.log(200)
}
Vue.use(a) // 执行结果为 200

因此，注册的插件如果有 install 这个属性且为函数，就会执行这个 install 函数，否则会执行这个插件函数本身。在源码中也能看到，插件函数的第一个参数就是 vue 这个构造函数本身。

router-link和router-view全局组件

在用到 vue-router 路由插件的时候有没有注意到一个问题，为什么我安装了 vue-router 就可以直接使用 router-link 和 router-view 这两个组件了呢，我并没有在项目中写这两个全局组件。

这是因为，在注册路由插件时，首先就是先定义两个全局组件，从上一节中我们知道插件的 install 方法在执行时的第一个参数已经被 Vue.use() 源码注入为 vue 的构造函数了，因为我们可以在这个构造函数上去创建 router-link 和 router-view 这两个全局组件。

在这里插入图片描述