跳到主要内容

VueRouter

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，使得构建单页应用（SPA）变得非常简单。通过Vue Router，我们可以构建出具有复杂路由的应用，支持嵌套路由/视图、模块化的、基于组件的路由配置、路由参数、查询、通配符等功能。

基本特性​

  1. 动态路由匹配：可以根据模式动态匹配路由到组件。
  2. 路由参数：在路径中使用“参数”（例如 /user/:id），可以使同一个路由映射到多个组件实例。
  3. 编程式的导航：除了使用<router-link>创建a标签来定义导航链接，还可以通过JavaScript来控制导航。
  4. 命名路由：可以给路由命名，简化路由的引用。
  5. 命名视图：支持多个视图的同时工作，而不是只有一个视图。
  6. 路由守卫：提供了“全局守卫”、“路由独享的守卫”和“组件内的守卫”等多种钩子函数，方便控制访问路由的权限。

实现原理​

Vue Router 的实现原理涉及到前端路由的基本概念，主要包括路由的监听和匹配、组件的渲染、以及历史记录的管理。

1. 路由模式​

Vue Router 支持三种路由模式：hash、history和abstract。

  • Hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。这种模式充分利用了 window.onhashchange 事件来监听 URL 的变化。
  • History模式：利用 HTML5 History API 来实现前端路由，这允许你创建一个不刷新页面也能改变 URL 的应用。主要使用 history.pushState 和 history.replaceState 方法来添加或修改历史记录条目。
  • Abstract模式：主要用于 Node.js 环境中，因为没有浏览器的 API，Vue Router 会在内存中模拟一个路由栈。

2. 路由的监听​

  • Hash模式：监听 hashchange 事件，当 URL 的 hash 部分发生变化时，Vue Router 会处理对应的路由。
  • History模式：监听 popstate 事件，当用户点击浏览器的前进/后退按钮时，或者执行 history.pushState/history.replaceState 方法时，Vue Router 会处理对应的路由。

3. 路由的匹配​

当 Vue Router 捕获到一个路由请求时，它会根据路由表（即你定义的路由配置）来查找匹配的路由记录。路由记录是根据路径匹配规则来定义的，可以包含动态参数。Vue Router 会解析出 URL 中的参数，并将其提供给对应的组件。

4. 组件的渲染​

一旦找到匹配的路由，Vue Router 就会实例化对应的 Vue 组件，并将其渲染到 <router-view> 占位符中。如果有嵌套路由，Vue Router 会递归地渲染所有匹配的子路由组件。

5. 历史记录的管理​

Vue Router 会根据激活的路由模式来管理浏览器的历史记录。在 History 模式下，Vue Router 通过 HTML5 History API 来管理浏览器历史记录，而在 Hash 模式下，它则通过改变 URL 的 hash 部分来管理历史记录。

6. 导航守卫​

Vue Router 提供了全局守卫、路由独享守卫和组件内守卫，允许在路由进入、离开或者组件被渲染之前执行一些逻辑，如权限验证或者数据预加载。

Vue Router 的核心就是监听 URL 的变化，然后根据路由配置找到匹配的路由记录，最后将对应的组件渲染到指定的位置。同时，它还提供了灵活的导航控制和历史管理能力，使得开发单页应用变得简单而高效。

源码实现​

1. 路由匹配和组件渲染​

在Vue Router中，首先需要定义一系列的路由规则，每个规则将一个URL路径映射到一个或多个Vue组件。当URL改变时，Vue Router会根据定义的路由规则找到匹配的组件，并将其渲染到<router-view>占位符所在的位置。

// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 定义路由规则
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

// 创建Router实例
const router = new VueRouter({
  routes
});

// 创建Vue实例并挂载
const app = new Vue({
  router
}).$mount('#app');

2. 响应式路由变化​

Vue Router利用了Vue的响应式系统来响应URL的变化。它在内部监听了URL的变化事件（通过hashchange或popstate事件），并在变化时更新当前路由的状态。然后，通过Vue的响应式系统触发视图的更新。

3. 历史管理​

Vue Router支持两种模式来管理浏览历史：hash模式和history模式。

  • Hash模式：通过监听URL的hash部分的变化来管理路由。这种模式兼容性好，但URL会包含#。
window.addEventListener('hashchange', () => {
  // 处理路由变化
});
  • History模式：利用HTML5 History API来管理浏览历史，实现无#的URL。这种模式需要服务器配置支持。
window.addEventListener('popstate', () => {
  // 处理路由变化
});

源码实现​

class SimpleRouter {
  constructor(options) {
    this.routes = options.routes || [];
    // 监听URL变化
    window.addEventListener('hashchange', this.onHashChange.bind(this));
    window.addEventListener('load', this.onHashChange.bind(this));
  }

  onHashChange() {
    const path = window.location.hash.slice(1) || '/';
    const route = this.routes.find(route => route.path === path);
    if (route) {
      // 动态渲染匹配的组件
      const view = document.querySelector('router-view');
      view.innerHTML = route.component.template;
    }
  }
}

// 使用示例
const router = new SimpleRouter({
  routes: [
    { path: '/home', component: { template: '<div>Home</div>' } },
    { path: '/about', component: { template: '<div>About</div>' } }
  ]
});