纯html模板需手动结合前端路由实现组件化——通过fetch加载模板并innerhtml注入，监听popstate响应url变化，拦截router-link默认跳转，配置服务端fallback，并显式传递路由上下文参数。
纯 HTML 模板本身不带路由能力，但和前端路由结合后，能形成轻量、可复用的组件化结构——关键不在“有没有框架”，而在“怎么让模板知道当前在哪、该渲染什么”。
如何让 <router-view></router-view> 正确加载 HTML 模板
原生 HTML 模板（如 about.html）不能直接被 <router-view></router-view> 自动解析，浏览器不会主动 fetch 并注入。必须手动干预：
- 用
fetch()加载模板字符串，再用element.innerHTML = htmlString注入到<router-view></router-view>容器中 - 避免直接
innerHTML执行脚本——HTML 模板里的<script></script>不会自动执行，需用eval()或动态创建<script></script>标签并 append 到 DOM（注意 CSP 限制） - 推荐把模板内容提前内联为 JS 字符串（如
templates.about = `<h1>关于</h1>...`），规避跨域和加载时序问题
history.pushState() 后如何同步更新 HTML 模板内容
调用 pushState() 只改 URL，不触发任何 DOM 更新。你得自己监听并响应：
- 必须监听
popstate事件，而不是hashchange（后者只适用于 hash 模式） - 在事件回调里，根据
event.state?.pathname或window.location.pathname匹配路由规则 - 匹配后，调用模板加载逻辑（见上一条），再手动替换
<router-view></router-view>的内容 - 别忘了在首次加载时也跑一遍匹配逻辑——
popstate不会在页面初始化时触发
为什么 <router-link></router-link> 点击后页面没反应
常见原因不是 JS 没注册，而是默认跳转没被拦截：
- 给所有
<router-link></router-link>绑定click事件，必须调用event.preventDefault() - 提取
to属性值（如link.getAttribute('to')），然后调用history.pushState(null, '', to) - 确保
<router-link></router-link>是合法自定义元素：用customElements.define('router-link', class extends HTMLElement {})注册过，否则某些浏览器会忽略其事件绑定 - 如果用了
href="/about"，点击仍会刷新——必须移除或禁用href，或用href="javascript:void(0)"配合 preventDefault
服务端 fallback 缺失导致刷新 404
这是 history 模式下最常被忽略的环节：用户直接访问 /user/123 时，请求根本没到前端 JS，而是由服务器处理。
- Nginx 需配置
try_files $uri $uri/ /index.html;，确保所有非静态资源请求都返回index.html - 开发时用
serve -s build（来自serve包）可自动 fallback；但http-server默认不支持，会 404 - 若部署在子路径（如
/app1/），fallback 规则要对应写成location /app1 { try_files $uri $uri/ /app1/index.html; } - 注意：fallback 只解决“刷新”问题，不影响 JS 内部的 pushState 行为
真正难的不是写几行路由代码，而是让每个 HTML 模板知道自己所处的上下文——路径参数、查询参数、是否在微前端子应用里、base path 是多少。这些信息不会自动附着在模板上，得靠显式传递或全局约定，漏掉一个，整个链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
