手把手带你亲手写一个简单的 Vue Router

2023-12-03 17:17:01

前言

在当今单页面应用（SPA）盛行的时代，路由系统已经成为前端开发中的必备技能。Vue Router 是 Vue.js 官方推荐的路由解决方案，它提供了强大的路由功能和灵活的配置选项，帮助开发者轻松构建单页面应用。

什么是路由？

在计算机科学中，路由是指在网络中选择路径将数据从一个网络节点传送到另一个网络节点的过程。在前端开发中，路由指的是在单页面应用中管理页面跳转和状态变化的过程。

Vue Router 的基本原理

Vue Router 是一个基于 Vue.js 的前端路由框架，它通过监听 URL 变化来触发组件的渲染和销毁，从而实现页面的跳转和状态管理。Vue Router 的核心思想是将路由配置为一个对象，其中包含路由的路径、组件和相关配置。当 URL 发生变化时，Vue Router 会根据路由配置找到对应的组件并渲染它。

手写一个简单的 Vue Router

为了更好地理解 Vue Router 的原理，我们不妨尝试自己实现一个简单的 Vue Router。

1. 初始化

首先，我们需要创建一个 VueRouter 构造函数，它接收两个参数：mode 和 routes。mode 指定了路由的运行模式，可以是 "hash" 或 "history"。routes 是一个包含路由配置的对象数组。

function VueRouter(mode, routes) {
  this.mode = mode;
  this.routes = routes;

  // 初始化当前路由
  this.currentRoute = null;

  // 创建一个 history 对象
  this.history = createHistory(mode);

  // 监听 URL 变化
  this.history.listen(this.onUrlChange.bind(this));
}

2. 路由匹配

当 URL 发生变化时，我们需要找到与当前 URL 匹配的路由配置。我们可以使用正则表达式来实现路由匹配。

VueRouter.prototype.match = function(url) {
  for (var i = 0; i < this.routes.length; i++) {
    var route = this.routes[i];
    if (route.path instanceof RegExp && route.path.test(url)) {
      return route;
    } else if (typeof route.path === "string" && route.path === url) {
      return route;
    }
  }

  return null;
};

3. 渲染组件

找到匹配的路由配置后，我们需要渲染对应的组件。我们可以使用 Vue.js 的 $router 对象来访问路由信息，并使用 $route 对象来访问当前路由的详细信息。

VueRouter.prototype.render = function() {
  var route = this.match(window.location.pathname);

  if (route) {
    this.currentRoute = route;

    // 创建组件实例
    var component = new route.component();

    // 渲染组件
    this.$router.$mount(component, "#app");
  }
};

4. 导航守卫

在某些情况下，我们需要在路由切换之前或之后执行一些操作。我们可以使用导航守卫来实现这一目的。

VueRouter.prototype.beforeEach = function(guard) {
  this.guards.beforeEach.push(guard);
};

VueRouter.prototype.afterEach = function(guard) {
  this.guards.afterEach.push(guard);
};

5. 安装插件

为了使 Vue Router 能够在 Vue.js 中使用，我们需要安装 Vue Router 插件。

Vue.use(VueRouter);

6. 使用 Vue Router

现在，我们就可以在 Vue.js 应用中使用 Vue Router 了。

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About }
  ]
});

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