告别代码冗余：用javascript构建轻量级页面路由
本文介绍一种无需Angular或Vue等框架，仅用JavaScript实现网页多页面路由的方法，有效解决多个页面大量重复代码的问题。 假设一个网页包含20多个菜单，每个菜单对应一个页面，传统方法导致代码维护困难。 本方案的核心在于JavaScript动态加载页面内容，并根据URL路径选择加载内容。
我们利用history API监听URL变化，结合XMLHttpRequest或fetch API加载对应页面。为了简化开发，我们借鉴前端路由框架的思路，例如Vue Router，只使用其路由管理功能，而不使用Vue组件化。
实现步骤：
-
引入必要的库: 引入Vue Router和jQuery库（当然，你可以选择其他库，比如原生JavaScript的fetch）。
蓝湖代码转vue2.0+element-ui下载将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“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错误。
