正文

从零开始，轻松掌握原生JS实现前端路由的奥秘

/0 浏览量
0411

在构建单页面应用（SPA）时，前端路由是一个关键技术。它允许我们改变地址栏的URL而不重新加载页面。使用原生JS实现前端路由，不仅可以让我们更好地控制应用的行为，还能提高应用的性能和用户体验。下面，我们就来一步步揭开原生JS实现前端路由的神秘面纱。

路由基础

首先，我们需要了解什么是路由。路由是一种映射关系，它将一个路径（通常是一个URL）映射到一个处理函数（通常是一个组件或视图）。在浏览器中，我们可以通过监听hashchange事件来实现路由。

监听hashchange事件

window.addEventListener('hashchange', function() {
  // 处理路由变化
});

路由映射

我们可以使用一个对象来存储路由映射关系，例如：

const routes = {
  '/': function() {
    console.log('首页');
  },
  '/about': function() {
    console.log('关于我们');
  },
  '/contact': function() {
    console.log('联系方式');
  }
};

实现路由

接下来，我们将实现一个简单的路由器。这个路由器会监听hashchange事件，并根据当前路径执行相应的处理函数。

创建路由器类

class Router {
  constructor() {
    this.routes = {};
    window.addEventListener('hashchange', () => {
      this.handle();
    });
  }

  // 添加路由
  add(path, callback) {
    this.routes[path] = callback;
  }

  // 处理路由变化
  handle() {
    const path = window.location.hash.slice(1);
    const callback = this.routes[path];
    if (callback) {
      callback();
    } else {
      console.log('404 Not Found');
    }
  }
}

使用路由器

const router = new Router();
router.add('/', () => console.log('首页'));
router.add('/about', () => console.log('关于我们'));
router.add('/contact', () => console.log('联系方式'));

动态路由

在实际应用中，我们可能需要处理动态路由。例如，一个商品详情页的路由可能是/product/123。为了处理这种情况，我们可以使用正则表达式来匹配路径。

处理动态路由

class Router {
  constructor() {
    this.routes = {};
    window.addEventListener('hashchange', () => {
      this.handle();
    });
  }

  // 添加路由
  add(path, callback) {
    const reg = new RegExp(`^${path}$`);
    this.routes[reg] = callback;
  }

  // 处理路由变化
  handle() {
    const path = window.location.hash.slice(1);
    const callback = this.routes[path];
    if (callback) {
      callback();
    } else {
      console.log('404 Not Found');
    }
  }
}

使用动态路由

const router = new Router();
router.add('/product/:id', (params) => {
  console.log(`商品详情页，商品ID：${params.id}`);
});

总结

通过以上步骤，我们已经成功地使用原生JS实现了前端路由。当然，这只是一个简单的实现，实际应用中可能需要更复杂的功能，例如路由守卫、参数解析等。不过，掌握了这个基础，相信你离成为一名优秀的全栈工程师又近了一步。

-- 展开阅读全文 --