如何用JavaScript实现简单的页面路由功能，避免大量重复代码？-html教程-PHP中文网

如何用JavaScript实现简单的页面路由功能，避免大量重复代码？

DDD

发布： 2025-03-03 21:54:10

原创

989人浏览过

如何用JavaScript实现简单的页面路由功能，避免大量重复代码？

告别代码冗余：用javascript构建轻量级页面路由

本文介绍一种无需Angular或Vue等框架，仅用JavaScript实现网页多页面路由的方法，有效解决多个页面大量重复代码的问题。假设一个网页包含20多个菜单，每个菜单对应一个页面，传统方法导致代码维护困难。本方案的核心在于JavaScript动态加载页面内容，并根据URL路径选择加载内容。

我们利用history API监听URL变化，结合XMLHttpRequest或fetch API加载对应页面。为了简化开发，我们借鉴前端路由框架的思路，例如Vue Router，只使用其路由管理功能，而不使用Vue组件化。

实现步骤：

引入必要的库: 引入Vue Router和jQuery库（当然，你可以选择其他库，比如原生JavaScript的fetch）。

极简智能王
极简智能- 智能聊天AI绘画，还可以创作、编写、翻译、写代码等多种功能，满足用户生活和工作的多方面需求

33

查看详情

立即学习“Java免费学习笔记（深入）”；
定义路由规则: 定义路由规则，meta属性指定每个路由对应的页面模板路径：

const routes = [
  {
    name: 'PageA',
    path: '/a',
    meta: { template: '/subpages/page-a.html' }
  },
  {
    name: 'PageB',
    path: '/b',
    meta: { template: '/subpages/page-b.html' }
  }
  // ...更多路由
];

登录后复制

创建Vue Router实例: 创建Vue Router实例，并配置beforeEach钩子函数，在路由切换前加载页面内容：

const router = new VueRouter({ mode: 'history', routes });

router.beforeEach((to, from, next) => {
  $('#route-view').empty();
  $('#route-view').load(to.meta.template);
  next();
});

window.$router = router; // 将路由实例挂载到window对象，方便全局访问

登录后复制

HTML中添加按钮和事件绑定: 在HTML中添加菜单按钮，使用jQuery绑定点击事件，触发路由跳转：

<button id="menuA">切换到 A</button>
<button id="menuB">切换到 B</button>
<div id="route-view"></div>

<script>
  $('#menuA').on('click', () => { $router.push({ name: 'PageA' }); });
  $('#menuB').on('click', () => { $router.push({ name: 'PageB' }); });
</script>

登录后复制

page-a.html和page-b.html等子页面只包含各自内容，公共代码放在主HTML文件中。这种方法巧妙地利用了Vue Router的路由功能，避免了复杂的路由逻辑编写，同时避免了Vue组件化的额外负担，提高了代码的可维护性。记住，history模式需要后端服务器支持，否则刷新页面可能出现404错误。

以上就是如何用JavaScript实现简单的页面路由功能，避免大量重复代码？的详细内容，更多请关注php中文网其它相关文章！