如何在网站编辑器用 HTML 页面动态子路径部署 Vue 博客单页应用（SPA）？

Daiven 运营团队

667

5个月前

一、需求背景

如果你想在自己网站里搭建博客，希望用单页应用（SPA）模式实现 — 像访问 ltd.com/blogdemo 是博客首页，ltd.com/blogdemo/category/123 是分类列表页，ltd.com/blogdemo/article/456 是文章详情页，且页面切换流畅、无需频繁整页刷新，利用网站编辑器新增的 “HTML 页面动态子路径” 功能就能实现！结合 Vue 框架，还能快速开发交互性强的博客，以下是一步步操作指南。

二、操作步骤（以搭建 Vue 博客 SPA 为例）

1. 新建含动态子路径的页面

• 进入编辑器：登录你的网站管理后台，打开网站编辑器，找到 “新增页面” 入口。
• 设置页面基础信息：

• 填写 “页面名称”（如 “博客Demo” ），方便识别。
• 关键操作：设置 “页面地址” 时，在路径末尾加 /* ，示例填 blogdemo/* 。这里 /* 就是 “动态子路径通配符” ，告诉系统：这个页面要支持 /blogdemo/ 后面跟任意路径（比如分类路径、文章 ID 路径等），为后续单页应用的不同路由做准备。
• 其他 SEO 相关（标题、关键词、描述）可按需填，暂时不填也不影响功能测试，填了能优化搜索引擎收录。

2. 开启 HTML 编辑模式（切换到代码自定义）

• 找到目标页面：在编辑器的页面列表里，找到刚新建的 “博客Demo” 页面。
• 进入 HTML 编辑器：点击页面右侧/操作栏的 ...（更多操作按钮），找到类似 “HTML 编辑”“代码编辑” 或带 <> 图标的按钮（如示例里的代码编辑入口），进入纯代码编辑环境。这一步是因为动态子路径功能目前仅对 HTML 类型（可自定义代码）的页面生效，要在这里写 Vue 代码、配置路由。

3. 用 AI 工具 + Vue 编写 SPA 代码（核心实现）

• 选 AI 工具辅助：如果你对 Vue 路由配置、SPA 开发不熟，可借助 AI 工具（比如豆包、ChatGPT 等），描述需求：“帮我写一个基于 Vue 的单页博客应用代码，要支持动态路由，有博客首页、分类列表页、文章详情页，用 Web History 模式” ，AI 会生成包含基础结构、路由配置的 Vue 代码。
• 核心代码逻辑（Vue 为例）：

• 依赖引入：确保代码里引入 Vue、Vue Router 等核心库，一般通过 CDN 或项目打包引入，比如：

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@4"></script>

• 路由配置（Web History 模式）：

• 定义路由规则，对应不同路径展示不同组件。比如：

const { createApp } = Vue;
const { createRouter, createWebHistory } = VueRouter;

// 模拟组件（实际可拆分单独文件）
const Home = { template: '<div>博客首页</div>' };
const Category = { template: '<div>分类列表页，分类ID：{{ $route.params.cat_id }}</div>' };
const Article = { template: '<div>文章详情页，文章ID：{{ $route.params.article_id }}</div>' };

// 路由规则
const routes = [
  { path: '/', component: Home }, // 博客首页，对应 /blogdemo/
  { path: '/category/:cat_id', component: Category }, // 分类页，:cat_id 是动态参数
  { path: '/article/:article_id', component: Article }, // 文章页，:article_id 是动态参数
];

// 创建路由实例（关键：用 createWebHistory 开启 Web History 模式，让路由路径像普通 URL ）
const router = createRouter({
  history: createWebHistory(), 
  routes,
});

// 创建 Vue 应用并挂载
const app = createApp({});
app.use(router);
app.mount('#app'); // 要在 HTML 里准备 <div id="app"></div> 作为挂载点

• HTML 结构：在代码编辑器里，写基础 HTML 骨架，包含 Vue 挂载点，比如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 博客 Demo</title>
  <!-- 引入 Vue、Vue Router CDN（也可用 npm 打包，这里为了简单用 CDN ）-->
  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@4"></script>
  <style>
    /* 简单样式，让页面结构清晰些，可自定义 */
    body { margin: 0; padding: 20px; }
    .router-link { margin-right: 10px; color: blue; text-decoration: underline; cursor: pointer; }
  </style>
</head>
<body>
  <!-- Vue 应用挂载点 -->
  <div id="app">
    <!-- 路由链接，点击切换页面，不刷新整页 -->
    <div>
      <a class="router-link" href="/blogdemo/">首页</a>
      <a class="router-link" href="/blogdemo/category/123">分类123</a>
      <a class="router-link" href="/blogdemo/article/456">文章456</a>
    </div>
    <!-- 路由组件渲染容器，不同路径对应组件在这里显示 -->
    <router-view></router-view> 
  </div>

  <script>
    // 这里就是前面 AI 帮写或自己写的 Vue 路由、组件代码
    const { createApp } = Vue;
    const { createRouter, createWebHistory } = VueRouter;

    const Home = { template: '<div><h1>博客首页</h1><p>这是用 Vue 做的单页博客示例</p></div>' };
    const Category = { 
      template: '<div><h2>分类列表</h2><p>当前分类 ID：{{ $route.params.cat_id }}</p></div>' 
    };
    const Article = { 
      template: '<div><h2>文章详情</h2><p>当前文章 ID：{{ $route.params.article_id }}</p></div>' 
    };

    const routes = [
      { path: '/', component: Home },
      { path: '/category/:cat_id', component: Category },
      { path: '/article/:article_id', component: Article },
    ];

    const router = createRouter({
      history: createWebHistory(), 
      routes,
    });

    const app = createApp({});
    app.use(router);
    app.mount('#app');
  </script>
</body>
</html>

• 关键配置说明：

• createWebHistory()：Vue Router 的配置，开启 “HTML5 History 模式” ，让路由路径像普通 URL（没有 # 符号），和我们设置的 blogdemo/* 动态路径完美配合，实现 /blogdemo/category/123 这种干净的 URL 。
• router-view：Vue Router 组件，用来渲染当前路径匹配的组件（首页、分类页、文章页组件会在这里替换显示），实现单页应用 “页面切换但不刷新整页” 的效果。

4. 发布并测试动态路径效果

• 保存 + 发布：在代码编辑器里，确认代码无误后，点击 “保存”“发布” 或类似按钮，让设置生效。
• 测试访问：打开浏览器，访问 ltd.com/blogdemo（你的域名 + 页面路径），然后点击页面里的路由链接（首页、分类、文章），观察地址栏变化 —— 会变成 /blogdemo/category/123 、/blogdemo/article/456 等，页面内容也会切换，但不会整页刷新。这就说明动态子路径 + Vue SPA 生效了！