使用 vue router 实现 history 路由

问题中描述了使用 History 路由进行页面切换的需求，无需在每个页面重复编写公共代码。这里提供了一种利用 Vue Router 和 jQuery 的解决方案：

<head>
  <!-- 引入 Vue、Vue 路由和 jQuery 库 -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.4/dist/vue-router.js"></script>
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.js"></script>
</head>
<body>
  <!-- 公共内容 -->
  <div>
    我是公共部分
    <button id="menuA">切换到 A</button>
    <button id="menuB">切换到 B</button>
  </div>

  <!-- 路由视图，用于显示动态内容 -->
  <div id="route-view"></div>

  <script>
    // 定义路由配置
    const routes = [
      {
        name: 'PageA',
        path: '/a',
        meta: {
          template: '/subpages/page-a.html',
        },
      },
      {
        name: 'PageB',
        path: '/b',
        meta: {
          template: '/subpages/page-b.html',
        },
      },
    ];

    // 创建 Vue 路由实例
    const router = new VueRouter({ mode: 'history', routes: routes });

    // 导航守卫，用于在切换路由时加载页面内容
    router.beforeEach(function (to, from, next) {
      // 移除旧页面
      $('#route-view').empty();
      // 加载新页面
      $('#route-view').load(to.meta.template);
      next(true);
    });

    // 将路由实例挂载到全局，便于子页面使用
    window.$router = router;

    // 点击按钮切换路由
    $('#menuA').on('click', function() { $router.push({ name: 'PageA' }) });
    $('#menuB').on('click', function() { $router.push({ name: 'PageB' }) });
  </script>
</body>

子页面代码：

<!-- page-a.html -->
<div>我是页面 A</div>

<!-- page-b.html -->
<div>我是页面 B</div>

使用方法：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

1. 确保服务器配置正确，支持 History 模式。
2. 在页面中包含上述 HTML 和 JavaScript 代码。
3. 根据需要创建子页面并放置在 /subpages 目录中。

通过这种方式，可以实现 History 路由，在切换页面时动态加载子页面的内容，并避免重复编写公共代码。

立即学习“前端免费学习笔记（深入）”；