巧用JavaScript和Vue Router精简20+页面公共代码
前端开发中，多个页面共享大量公共代码是常见问题，导致代码冗余和维护困难。本文探讨如何利用JavaScript，特别是Vue Router，有效解决此问题，即使页面数量多达20个以上。
假设一个网页包含20多个菜单，每个菜单对应一个页面，所有页面都需要相同的公共代码。 为了避免重复编写，我们可以利用Vue Router的路由机制，结合jQuery的AJAX方法，动态加载页面内容，无需使用Vue.js组件。
实现步骤：
立即学习“Java免费学习笔记（深入）”；
-
引入必要库： 引入jQuery、Vue和Vue Router。 这里引入Vue是为了避免Vue Router抛出异常，但实际代码中并不依赖Vue.js特性。 也可以只创建一个包含空
component、extend和mixin方法的全局Vue对象。 -
定义路由配置： 创建路由配置数组，包含每个页面的路径和对应的HTML模板文件路径（例如，将模板文件放在
/subpages目录下）：
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实例，使用
history模式。 在beforeEach钩子函数中，清空目标容器（例如#route-view），然后使用jQuery的$.load()方法加载对应的页面内容：
const router = new VueRouter({ mode: 'history', routes });
router.beforeEach((to, from, next) => {
$('#route-view').empty();
$('#route-view').load(to.meta.template, () => {
// 可在此处添加页面加载完成后的操作，例如执行页面内JS代码
next(true);
});
});
-
绑定菜单点击事件： 将
$router挂载到全局，并为每个菜单按钮绑定点击事件，使用$router.push()方法跳转到相应的页面：
window.$router = router;
$('#menuA').on('click', () => { $router.push({ name: 'pageA' }); });
$('#menuB').on('click', () => { $router.push({ name: 'pageB' }); });
// ... 其他菜单按钮事件
/subpages/page-a.html和/subpages/page-b.html分别包含页面A和页面B的内容，以及各自的JS和CSS。
重要提示：
-
history模式需要后端服务器配置，否则刷新页面可能导致404错误。 - 需要处理页面加载失败的情况，并考虑显示加载状态。
- 需要仔细处理子页面中JS和CSS文件的加载顺序，避免冲突。 考虑使用异步加载或模块化加载方式。
通过这种方法，利用Vue Router管理路由，结合jQuery AJAX动态加载页面内容，可以有效避免代码冗余，实现高效的页面切换，即使面对20多个页面也能够轻松维护。 记住处理好细节问题，确保应用的稳定性和用户体验。
