简化前端路由：5分钟手写简版VueRouter

2023-12-29 12:58:52

在单页面应用(SPA)中，路由是一项必不可少的技术，它允许我们在不重新加载整个页面的情况下在页面之间导航。Vue.js，一个流行的JavaScript框架，提供了VueRouter作为其官方路由解决方案。虽然VueRouter是一个功能强大的库，但它也可能有些复杂，尤其是对于初学者来说。

为了简化学习过程，本文将指导你创建一个简版的VueRouter，它将包含路由机制的核心功能。我们将专注于理解路由的工作原理，而不是实现所有的功能和特性。

创建我们的简版VueRouter

我们的简版VueRouter将由两个主要部分组成：

路由器类： 负责管理路由表和当前活动路由。
路由链接组件： 允许用户在路由之间导航。

路由器类

class Router {
  constructor(routes) {
    this.routes = routes;
    this.currentRoute = null;
  }

  navigate(path) {
    const route = this.routes.find(route => route.path === path);
    if (route) {
      this.currentRoute = route;
      route.component();
    }
  }
}

路由链接组件

Vue.component('router-link', {
  props: ['to'],
  template: '<a @click="navigate">{{ to }}</a>',
  methods: {
    navigate() {
      this.$router.navigate(this.to);
    }
  }
});

使用我们的简版VueRouter

现在，我们已经创建了我们的简版VueRouter，让我们看看如何使用它。

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <div id="content">
    <component :is="$router.currentRoute.component"></component>
  </div>
</template>

<script>
import Router from './Router.js';

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new Router(routes);

export default {
  router
};
</script>