vue的两种路由模式源码分析

Vue是一个用于构建用户界面的渐进式JavaScript框架。它提供了多种功能模块，其中之一是路由模块，用于实现前端页面的导航效果。在Vue中，有两种常见的路由模式：hash模式和history模式。 ## hash模式 hash模式是Vue默认的路由模式。在hash模式下，URL中会带有"# "符号，后面跟着一个路径片段，用于表示当前路由状态。由于hash部分不会被包含在HTTP请求中，所以对后端服务器来说是无效的，而且在Web开发中通常用于页面内的锚点定位。hash模式的实现主要依托浏览器的onhashchange事件，当URL的hash部分发生变化时，浏览器会自动触发该事件，Vue通过监听此事件实现路由的变化。 对于hash模式来说，Vue的路由实现主要是通过window.location.hash属性进行监听和操作的。在VueRouter的源码中，有一个HashHistory类实现了hash模式下的路由控制。该类通过监听onhashchange事件，当hash值发生变化时，会通过匹配路由表，找到对应的组件进行渲染。 下面是VueRouter中HashHistory类的部分源码：

class HashHistory extends History {
  // ...
  
  constructor(router, base) {
    super(router, base);
    ensureSlash();
  }

  // ...

  setupListener () {
    const supportsPushState = 
      window.history && window.history.pushState;

    if (supportsPushState) {
      window.addEventListener('popstate', 
        this.onPopState);
    } else {
      window.addEventListener('hashchange', 
        this.onHashChange);
    }
  }

  // ...
}

## history模式 history模式是另一种常见的路由模式。在history模式下，URL中不再带有"# "符号，而是直接使用正常的URL路径。history模式依赖于HTML5的history API，它提供了pushState()和replaceState()方法，用于操作浏览器的历史记录。history模式下，根据URL路径的变化，浏览器会发送HTTP请求到服务器，因此在后端需要进行相应的配置，以防止请求到不存在的页面时返回404错误。 在Vue中，history模式的实现主要通过history API的pushState()和replaceState()方法实现路由的改变，并通过监听popstate事件来响应浏览器前进后退操作。 下面是VueRouter中HTML5History类的部分源码：

class HTML5History extends History {
  // ...

  constructor(router, base) {
    super(router, base);
    this.base = normalizeBase(base);
  }

  // ...

  push (location, onComplete, onAbort) {
    const { current: fromRoute } = this;
    this.transitionTo(location, route => {
      pushState(cleanPath(this.base + route.fullPath));
      handleScroll(router, route, fromRoute, false);
      onComplete && onComplete(route);
    }, onAbort);
  }

  // ...
}

总结来说，Vue的路由模块提供了hash模式和history模式两种常见的路由实现方式。hash模式使用URL中的hash部分进行路由控制，不需要服务器端的配合，适用于单页应用和需要对URL进行锚点定位的场景。history模式通过HTML5的history API实现路由控制，URL显示更为友好，但需要服务器端配合，适用于多页应用和需要支持浏览器的前进后退操作的场景。无论选择哪种路由模式，Vue的路由模块都提供了统一的API和管理方式，方便开发人员进行前端页面的导航控制。