vue-routerhistory原理
Vue Router 是 Vue.js 官方提供的路由管理器，它可以帮助我们实现单页应用的页面跳转切换效果。Vue Router 通过使用 history 模式实现路由跳转，下面将详细介绍 Vue Router history 模式的原理。
Vue Router 提供了两种路由模式：hash 和 history。其中，hash 模式使用 URL 的 hash（#）来模拟路由跳转，而 history 模式则使用 HTML5 提供的 history API 来实现路由跳转。
在使用 history 模式时，Vue Router 会使用 HTML5 的 pushState 和 replaceState 方法来实现路由跳转，这两个方法可以对浏览器的历史记录栈进行修改。简单来说，pushState 方法会向浏览器历史记录栈添加一条新纪录，而 replaceState 方法则会替换当前的记录，并不会新增一条记录。
在使用 history 模式时，我们需要配置服务器端来支持路由跳转。当用户访问一个 history 模式的路由时，服务器需要返回同一个 HTML 页面，然后由客户端的 JavaScript 来控制页面的渲染和路由的跳转。这也是为什么在使用 Vue Router 的 history 模式时，需要在服务器端进行配置，确保所有的路由都指向同一个 HTML 页面。
在 Vue Router 中，我们需要通过创建一个 history 对象来实现路由的跳转。这个 history 对象会监听浏览器的变化，比如地址栏的变化，然后触发相应的回调函数来执行路由的跳转。
react router 原理当我们在 Vue Router 中定义了一个路由时，会创建一个 Router 对象，并将其传递给 Vue 实例来使用。Router 对象是由 Vue Router 根据配置生成的，它包含了所有的路由信息和跳转逻辑。
当我们在 Vue 实例中调用 $router.push 方法时，会触发 Router 实例中的 push 方法。这个 push 方法会根据传入的路由配置生成一个新的路由对象，并将其添加到浏览器历史记录栈中，然后触发路由跳转。
跳转的过程中，Vue Router 会根据配置的路由规则来匹配要跳转的目标路由，并执行对应的组件渲染逻辑。在渲染过程中，Vue Router 会寻目标路由对应的组件，并将其渲染到指定的位置。
在 history 模式下，Vue Router 还提供了一个 history 对象，通过这个对象我们可以直接操作浏览器的历史记录栈。比如，我们可以通过 history.back( 和 history.forward( 方法来实现后退和前进操作。
总结来说，Vue Router 的 history 模式是通过 HTML5 提供的 history API 来实现的。在使用 history 模式时，Vue Router 会监听浏览器的变化，然后根据配置的路由规则执行相应的路由跳转逻辑。在跳转过程中，Vue Router 会使用 pushState 和 replaceState 方法来修改浏览器的历史记录栈，并通过给定的组件渲染逻辑来完成路由的渲染。最后，Vue Router 还提供了一个 history 对象，通过这个对象我们可以直接操作浏览器的历史记录栈。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。