单页面应用
单页面应用是将 o-app 组件与浏览器地址栏绑定，使网页 URL 与应用内的页面路径保持同步。启用单页面应用后：
- 刷新网页可以保持当前的路由状态
- 复制地址栏的 URL，在其他浏览器或标签页打开，同样可以还原应用状态
- 浏览器的前进/后退按钮可以正常使用
基本用法
使用官方的 o-router 组件包裹 o-app 组件，即可实现单页面应用。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>router test</title>
<script src="https://cdn.jsdelivr.net/gh/ofajs/ofa.js/dist/ofa.mjs" type="module"></script>
</head>
<body>
<l-m src="https://cdn.jsdelivr.net/gh/ofajs/ofa.js/libs/router/dist/router.min.mjs"></l-m>
<o-router>
<o-app src="./app-config.js"></o-app>
</o-router>
</body>
</html>fix-body 属性
添加 fix-body 属性后，o-router 会自动重置 html 和 body 的样式，消除默认的 margin 和 padding。
<o-router fix-body>
<o-app src="./app-config.js"></o-app>
</o-router>这在以下场景特别有用：
- 需要
o-app完全填满视口 - 应用作为页面唯一内容时
示例
// 应用首页地址
export const home = "./home.html";
// 页面切换动画配置
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
export const loading = () => {
const loadingEl = $({
tag: "div",
css: {
width: "100%",
height: "100%",
position: "absolute",
zIndex: 1000,
},
html: `
`,
});
setTimeout(() => (loadingEl[0].style.width = "98%"));
loadingEl.remove = () => {
loadingEl[0].style["transition-duration"] = "0.1s";
loadingEl[0].style.width = "100%";
setTimeout(() => {
\$.fn.remove.call(loadingEl);
}, 200);
};
return loadingEl;
};
{{val}}
Go to About
About ofa.js
工作原理
单页面应用基于浏览器的 Hash 模式实现：
- 当应用内发生页面切换时，
o-router会自动更新地址栏的 hash 值（如#/about.html） - 当用户刷新页面或通过 URL 访问时，
o-router会读取 hash 值并加载对应页面 - 浏览器的前进/后退按钮会触发 hash 变化，进而控制应用的页面导航
URL 变化示例
假设应用有两个页面 home.html 和 about.html：
| 用户操作 | 地址栏变化 |
|---|---|
| 打开应用 | index.html → index.html#/home.html |
| 跳转到关于页 | index.html#/home.html → index.html#/about.html |
| 点击返回 | index.html#/about.html → index.html#/home.html |
| 刷新页面 | 保持当前 hash 不变 |
使用限制
- 单页面应用只能与一个
o-app组件配合使用