vue——vue-router 原理

最新推荐文章于 2023-04-18 10:18:22 发布

肖ZE

最新推荐文章于 2023-04-18 10:18:22 发布

阅读量176

点赞数

分类专栏：源码解析

本文链接：https://blog.csdn.net/lucky541788/article/details/103255516

版权

本文详细解析了vue-router的两种前端实现方式：HashHistory和HTML5History。HashHistory利用URL的hash实现视图更新，通过监听hash变化并结合Vue的响应式系统更新视图。replace方法用于替换栈顶记录。HTML5History则通过History接口的pushState和replaceState方法修改浏览器历史记录栈，实现无hash的路由切换。

摘要由CSDN通过智能技术生成

vue-router 主要有三种模式 hash、history、abstract（服务端使用）

前端实现方式主要有以下两种：

hash ---- 利用 URL 中的 hash（“#”，window.location.hash）----（默认方式）
利用 History interface 在 HTML5 中新增的方法 >>详情点击

// 根据 mode 确定 history 实际的类并实例化
switch (mode) {
   
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
   
      assert(false, `invalid mode: ${
     mode}`)
    }
}