路由与导航
应用内的页面导航是单页面应用的核心功能。本章介绍如何使用编程式导航、管理路由历史，以及监听路由变化。
allowForward - 前进功能
默认情况下，应用只支持后退导航。在 app-config.js 中设置 allowForward 为 true 后，可以启用应用的前进功能。
// app-config.js
export const allowForward = true;启用后：
- 用户可以使用浏览器的前进/后退按钮进行导航
- 应用的
forward()方法可以正常工作
编程式导航
除了使用 olink 属性的链接，还可以在 JavaScript 中调用导航方法。
重要说明：
goto、replace、back方法在**页面实例（page）和应用实例（app）**上都可用forward方法只在**应用实例（app）**上可用- 在页面中使用：
this.goto()或this.app.goto()- 在组件中使用：
this.app.goto()（需要通过 app 实例调用）路径相对性说明：
- 在页面模块上使用
goto或replace，路径是相对于当前页面模块的地址- 在应用实例（app）上使用
goto或replace，路径是相对于当前应用导航的地址
goto - 跳转页面
跳转到指定页面，并添加到历史记录：
// 跳转到指定页面
this.goto("./about.html");
// 带参数跳转
this.goto("./detail.html?id=123");replace - 替换页面
替换当前页面，不添加到历史记录：
// 替换当前页面
this.replace("./login.html");常用于登录后跳转，避免用户点击后退按钮回到登录页。
back - 后退
返回到上一页：
this.back();forward - 前进
前进到下一页（需要设置 allowForward: true）：
// 在页面或组件中调用
this.app.forward();注意：
forward方法必须在应用实例（app）上调用，而不是在页面实例上调用。例如使用this.app.forward()而不是this.forward()。
导航方法对比
| 方法 | 历史记录 | 使用场景 |
|---|---|---|
goto |
添加新记录 | 正常页面跳转 |
replace |
替换当前记录 | 登录后跳转、重定向 |
back |
回退到上一条 | 返回操作 |
forward |
前进到下一条 | 前进操作（需启用） |
路由历史
获取路由历史
通过 routers 属性获取所有路由历史：
const history = app.routers;
// 返回格式: [{ src: "./page1.html" }, { src: "./page2.html" }, ...]获取当前页面
通过 current 属性获取当前页面实例：
const currentPage = app.current;
console.log("当前页面:", currentPage.src);路由历史示例
export const proto = {
get canGoBack() {
return this.routers && this.routers.length > 1;
},
get canGoForward() {
// 需要配合 allowForward 使用
return this.routers && this.currentIndex < this.routers.length - 1;
},
get currentPath() {
return this.current?.src || "";
},
};监听路由变化
通过监听 router-change 事件来响应路由变化。
基本用法
app.on("router-change", (e) => {
const { data } = e;
console.log("路由变化:", data.name);
console.log("页面地址:", data.src);
});事件数据
router-change 事件的数据对象包含：
| 属性 | 说明 | 可能的值 |
|---|---|---|
name |
导航类型 | goto, replace, forward, back |
src |
目标页面地址 | 页面路径 |
使用示例
export const ready = function () {
// 监听路由变化
this.on("router-change", (e) => {
const { name, src } = e.data;
// 记录页面访问
console.log(`[${name}] 导航到: ${src}`);
// 更新页面标题
this.updateTitle(src);
// 发送统计数据
this.trackPageView(src);
});
};
export const proto = {
updateTitle(src) {
const titles = {
"home.html": "首页",
"about.html": "关于我们",
"contact.html": "联系我们",
};
const pageName = src.split("/").pop();
document.title = titles[pageName] || "应用";
},
trackPageView(src) {
// 发送页面访问统计
console.log("统计页面访问:", src);
},
};页面导航守卫
结合路由监听，可以实现导航守卫功能：
export const ready = function () {
this.on("router-change", (e) => {
const { src } = e.data;
// 检查是否需要登录
if (this.requiresAuth(src) && !this.isLoggedIn()) {
e.preventDefault();
this.goto("./login.html");
}
});
};
export const proto = {
requiresAuth(src) {
const authPages = ["profile.html", "settings.html"];
return authPages.some((page) => src.includes(page));
},
isLoggedIn() {
return !!this.globalData?.user;
},
};完整示例
// 应用首页地址
export const home = "./home.html";
export const allowForward = true;
// 页面切换动画配置
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 ready = function() {
console.log("应用已初始化");
this.on("router-change", (e) => {
console.log("路由变化:", e.data);
});
};
export const proto = {
get routerCount() {
return this.routers?.length || 0;
},
};
{{val}}
路由历史数量: {{app.routerCount}}
Go to About
About ofa.js
路由历史数量: {{app.routerCount}}
提示：点击"后退"后，在首页可以点击"前进"回到这里