JS实现前端路由功能示例【原生路由】

关于JS实现前端路由功能示例【原生路由】的攻略，我会分步骤进行讲解，具体如下：

一、创建路由类

首先我们需要创建一个路由类，这个类的作用是记录不同的路由地址和对应的回调函数。下面是一个实现的例子：

class Router {
  constructor() {
    this.routes = {};
    this.curUrl = '';
  }
  // 存储路由规则，回调函数
  route(path, callback) {
    this.routes[path] = callback || function() {};
  }
  // 更新状态
  update() {
    this.curUrl = location.hash.slice(1) || '/';
    this.routes[this.curUrl]();
  }
}

二、初始化路由

在我们使用路由之前，需要先进行初始化操作。因为我们的路由需要监控网页中hash值的变化，当url中hash发生改变时，路由会根据新的hash值来匹配对应的回调函数，从而达到页面跳转的效果。

我们可以通过监听hashchange事件及load事件，来触发我们的路由更新操作。

const router = new Router();
router.route('/', () => {
  // do something ...
});
// ... 添加其他路由规则

function initRouter() {
  router.update();
  window.addEventListener('hashchange', () => {
    router.update()
  });
  window.addEventListener('load', router.update());
}

initRouter();

三、创建页面

接下来，我们需要创建与路由相对应的页面。一般来说，我们可以通过更改页面的dom元素内容来模拟页面跳转的效果。

<!DOCTYPE html>
<html>
  <head>
    <title>前端路由功能示例</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#/">首页</a></li>
          <li><a href="#/about">关于我们</a></li>
          <li><a href="#/contact">联系我们</a></li>
        </ul>
      </nav>
    </header>
    <section id="content"></section>
    <script src="router.js"></script>
    <script src="index.js"></script>
  </body>
</html>

四、实现页面跳转

上传至服务器即可实现跳转效果

const router = new Router();
const content = document.querySelector('#content');
router.route('/', () => {
  content.innerHTML = '<h1>这是首页</h1>';
});
router.route('/about', () => {
  content.innerHTML = '<h1>这是关于我们</h1>';
});
router.route('/contact', () => {
  content.innerHTML = '<h1>这是联系我们</h1>';
});

function initRouter() {
  router.update();
  window.addEventListener('hashchange', () => {
    router.update()
  });
  window.addEventListener('load', router.update());
}

initRouter();

以上就是JS实现前端路由功能示例【原生路由】的完整攻略。在这个示例中，我们通过创建一个路由类，记录不同的路由地址和对应的回调函数，通过更新hash值来匹配对应的路由规则，并更改页面的dom元素内容来模拟页面跳转的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现前端路由功能示例【原生路由】 - Python技术站

JS实现前端路由功能示例【原生路由】

一、创建路由类

二、初始化路由

三、创建页面

四、实现页面跳转

相关文章