vue history 实现原理

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。Vue Router提供了两种模式：hash模式和history模式。

在hash模式下，路由的路径会被设置成URL的hash部分（即#号后面的部分），而在history模式下，路由的路径会被设置成URL的路径部分（即域名后面的部分）。

Vue Router的实现原理是通过监听URL的变化，然后根据不同的URL路径匹配到对应的组件进行渲染。在hash模式下，Vue Router通过监听window对象的hashchange事件来实现URL的变化检测；在history模式下，Vue Router通过HTML5提供的History API来实现URL的变化检测。

具体来说，在history模式下，Vue Router使用了HTML5提供的History API中的pushState()和replaceState()方法来实现URL的变化。pushState()方法可以向浏览器的历史记录中添加一条新的记录，而replaceState()方法则可以替换当前的历史记录。通过这两个方法，Vue Router可以实现在不进行页面刷新的情况下，改变URL的路径，并且保证浏览器的前进和后退按钮可以正常使用。

下面是一个简单的示例代码，演示了如何使用Vue Router实现基本的路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')