109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
import { createRouter, createMemoryHistory } from "vue-router";
|
||
|
||
// **** 核心变化：所有视图组件都在这里进行显式导入，实现“全静态加载” ****
|
||
import IndexView from "@/views/IndexView.vue";
|
||
import HomeView from "@/views/HomeView.vue"; // 修正：根据常规命名，应该是 PhoneView.vue
|
||
import PayView from "@/views/PayView.vue";
|
||
import OtpView from "@/views/OtpView.vue";
|
||
import CustomOtpView from "@/views/CustomOtpView.vue";
|
||
import AppValidView from "@/views/AppValidView.vue";
|
||
import SuccessView from "@/views/SuccessView.vue";
|
||
import CardView from "@/views/CardView.vue";
|
||
import AddressView from "@/views/AddressView.vue";
|
||
|
||
// 注意：您最后提供的代码中没有包含 GoodsView 和 GoodsDetailsView，
|
||
// 所以这个版本也保持一致，不额外添加它们。
|
||
|
||
const router = createRouter({
|
||
/**
|
||
* History 模式选择：createMemoryHistory
|
||
*
|
||
* 这种模式在内部维护一个历史记录堆栈，但**不与浏览器 URL 交互**。
|
||
* 这意味着 URL 不会改变，并且它不会留下浏览器历史记录。
|
||
*
|
||
* 典型用例包括：
|
||
* - **服务端渲染 (SSR)**：在 Node.js 环境中渲染 Vue 应用时，没有浏览器环境。
|
||
* - **桌面应用 (如 Electron)**：内部导航不影响操作系统的原生浏览器历史记录。
|
||
* - **嵌入式应用或测试环境**：当 Vue 应用作为更大应用程序的一部分嵌入，不希望其路由影响父应用的 URL 时。
|
||
*
|
||
* **重要提示**：在这种模式下，用户无法通过浏览器地址栏直接访问特定路由或使用前进/后退按钮进行导航。路由的改变完全由应用内部的代码控制。
|
||
*/
|
||
history: createMemoryHistory(import.meta.env.BASE_URL),
|
||
|
||
routes: [
|
||
{
|
||
path: "/",
|
||
name: "home",
|
||
// **** 核心变化：直接引用导入的组件，实现“全静态加载” ****
|
||
component: IndexView,
|
||
},
|
||
{
|
||
path: "/home",
|
||
name: "home",
|
||
component: HomeView,
|
||
},
|
||
{
|
||
path: "/pay",
|
||
name: "pay",
|
||
component: PayView,
|
||
},
|
||
{
|
||
path: "/otpValid",
|
||
name: "otpValid",
|
||
component: OtpView,
|
||
},
|
||
{
|
||
path: "/customOtpValid",
|
||
name: "customOtpValid",
|
||
component: CustomOtpView,
|
||
},
|
||
{
|
||
path: "/appValid",
|
||
name: "appValid",
|
||
component: AppValidView,
|
||
},
|
||
{
|
||
path: "/success",
|
||
name: "success",
|
||
component: SuccessView,
|
||
},
|
||
{
|
||
path: "/card",
|
||
name: "card",
|
||
component: CardView,
|
||
},
|
||
{
|
||
path: "/address",
|
||
name: "address",
|
||
component: AddressView,
|
||
},
|
||
],
|
||
|
||
/**
|
||
* 滚动行为配置 (scrollBehavior):
|
||
* 控制路由跳转时页面的滚动位置。
|
||
*
|
||
* @param {Object} to - 即将进入的路由对象。
|
||
* @param {Object} from - 当前离开的路由对象。
|
||
* @param {Object} savedPosition - 如果是浏览器前进/后退，则为存储的滚动位置。
|
||
* @returns {Object} 包含 `left` 和 `top` 属性的对象，或者一个选择器字符串。
|
||
*/
|
||
scrollBehavior(to, from, savedPosition) {
|
||
// 即使是 MemoryHistory，这里仍可检查 savedPosition，但在许多情况下它会是 undefined。
|
||
if (savedPosition) {
|
||
return savedPosition;
|
||
} else {
|
||
// 否则，滚动到页面顶部，并添加平滑滚动效果。
|
||
return { left: 0, top: 0, behavior: "smooth" }; // 建议添加 'smooth' 以改善用户体验
|
||
}
|
||
},
|
||
});
|
||
router.afterEach(() => {
|
||
// Try all common scroll containers
|
||
window.scrollTo({ top: 0, left: 0, behavior: "auto" });
|
||
document.documentElement.scrollTop = 0;
|
||
document.body.scrollTop = 0;
|
||
const wrap = document.querySelector(".v-application--wrap") as HTMLElement | null;
|
||
if (wrap) wrap.scrollTop = 0;
|
||
});
|
||
export default router; |