Vue Router的路由模式hash和history的实现原理？

1. hash模式实现原理

早期前端路由的实现就是基于location.hash来实现的，其实实现原理很简单，location.hash的值就是URL中#后面的内容，比如下面这个网站，它的location.hash的值为#search:

https://www.lvyweb.com#search

hash路由模式的实现主要是基于下面几个特性

• URL中hash值只是客户端的一种状态，也就是说当向服务器端发送请求时，hash部分不会被发送
• hash值得改变，都会在浏览器的访问历史中增加一个记录，因此我们能通过浏览器的回退，前进按钮控制hash的切换
• 可以通过a标签，并设置href属性，当用户点击这个便签后，URL的hash值会发生改变；或者使用JavaScript来对location.hash进行赋值，改变URL的hash值
• 我们可以使用hashchange事件来监听hash值的变化，从而对页面进行跳转（渲染）

2. history模式的实现原理

HTML5提供了History API来实现URL的变化，其中最主要的两个API有以下两个
history.pushState()和history.replaceState()。这两个API可以在不进行刷新的情况下，操作浏览器的历史记录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

window.history.pushState(null,null,path)
window.history.replaceState(null,null,path)

history路由模式的主要基于存在下面几个特性：

• pushState和replaceState两个API操作实现URL的变化
• 我们可以使用popstate事件来监听URL的变化，从而对页面进行跳转（渲染）
• history.pushState()和history.replaceState()不会触发popstate事件，这时我们需要手动触发页面跳转（渲染）

3. history的问题

History路由模式虽然好看，但是这种路由模式想要玩好，还需要后台配置支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器访问http://outsite.com/user/id返回404,这就不好看了。
所以呢，你要在服务器增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。

4. 简单实现Vue Router

Vue Router核心是，通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象，当浏览器地址发生变化的时候，根据router对象匹配相应路由，获取组件，并将组件渲染到视图上。
（1）如何在install方法中获取Vue实例上的router属性
可以利用Vue.mixin混入声明周期函数beforeCreate，在beforeCreate函数中可以获取到Vue实例的属性并赋值到Vue原型链上

    _Vue.minin({
        beforeCreate() {
            if(this.$options.router){
                _Vue.prototype.$router = this.$options.router
            }
        },
    })

(2)如何触发更新
hash模式如下：

• 通过location.hash 修改hash值，触发更新
• 通过监听hashchange事件监听浏览器前进或者后退，触发更新
  history模式如下；
• 通过history.pushState修改浏览器地址，触发更新
• 通过监听popstate事件监听浏览器前进或者后退，触发更新
  如何渲染router-view组件
• 通过Vue.observable在router实例上创建一个保存当前理由的监控对象current
• 当浏览器地址变化的时候，修改监控对象current
• 在router-view组件中监听监控对象current的变化，当current变化后，获取用户注册的相应的component，并利用h函数将component渲染成vncodes,进而更新页面视图
  还有一篇关于这个文章不错https://blog.csdn.net/weixin_42752574/article/details/108457614