当前位置：首页 > 文章列表 > 文章 > 前端 > 巧用JavaScript和vue-router，解决20+页面代码冗余

巧用JavaScript和vue-router，解决20+页面代码冗余

2025-03-14 20:24:10 0浏览收藏

本文介绍如何使用JavaScript和Vue Router解决20多个页面代码冗余的问题。通过Vue Router的路由机制和jQuery的AJAX方法，动态加载页面内容，避免重复编写公共代码。文章详细阐述了实现步骤，包括引入必要的库(Vue, Vue Router, jQuery)，定义路由配置，创建Vue Router实例并使用`beforeEach`钩子函数动态加载页面模板，以及绑定菜单点击事件进行页面跳转。该方法有效提升代码可维护性，即使面对大量页面也能轻松管理，但需注意history模式下的服务器配置、页面加载失败处理及JS/CSS加载顺序等细节问题。关键词：Vue Router，jQuery，代码冗余，前端开发，页面跳转，路由机制，AJAX。

如何利用JavaScript和vue-router高效解决20多个页面共用公共代码的冗余问题？

巧用JavaScript和Vue Router精简20+页面公共代码

前端开发中，多个页面共享大量公共代码是常见问题，导致代码冗余和维护困难。本文探讨如何利用JavaScript，特别是Vue Router，有效解决此问题，即使页面数量多达20个以上。

假设一个网页包含20多个菜单，每个菜单对应一个页面，所有页面都需要相同的公共代码。为了避免重复编写，我们可以利用Vue Router的路由机制，结合jQuery的AJAX方法，动态加载页面内容，无需使用Vue.js组件。

实现步骤：

引入必要库： 引入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。

重要提示：