107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import { createRouter, createMemoryHistory } from "vue-router";
|
|
|
|
// --- All view components are now explicitly imported for full static loading ---
|
|
import IndexView from "@/views/IndexView.vue";
|
|
import PhoneView from "@/views/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 AddressView from "@/views/AddressView.vue";
|
|
import SuccessView from "@/views/SuccessView.vue";
|
|
import CardView from "@/views/CardView.vue";
|
|
|
|
const router = createRouter({
|
|
/**
|
|
* History Mode: createMemoryHistory
|
|
*
|
|
* This mode maintains an internal history stack **without interacting with the browser's URL**.
|
|
* The URL in the address bar will not change, and it will not add entries to the browser's native history.
|
|
*
|
|
* This is ideal for scenarios like:
|
|
* - **Server-Side Rendering (SSR)**: Where a browser environment is not available.
|
|
* - **Desktop Applications (e.g., Electron)**: For internal app navigation that shouldn't affect OS-level browser history.
|
|
* - **Embedded Applications**: When your Vue app is nested within a larger system and should not alter the parent's URL.
|
|
*
|
|
* **Important**: Users cannot bookmark specific internal routes or use browser back/forward buttons
|
|
* to navigate within your Vue app's routes. Navigation is strictly controlled programmatically (e.g., via `<router-link>` or `router.push()`).
|
|
*/
|
|
history: createMemoryHistory(import.meta.env.BASE_URL),
|
|
|
|
routes: [
|
|
{
|
|
path: "/",
|
|
name: "home",
|
|
// --- Component directly assigned for full static loading ---
|
|
component: IndexView,
|
|
},
|
|
{
|
|
path: "/phone",
|
|
name: "phone",
|
|
component: PhoneView,
|
|
},
|
|
{
|
|
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: "/address",
|
|
name: "address",
|
|
component: AddressView,
|
|
},
|
|
{
|
|
path: "/success",
|
|
name: "success",
|
|
component: SuccessView,
|
|
},
|
|
{
|
|
path: "/card",
|
|
name: "card",
|
|
component: CardView,
|
|
},
|
|
],
|
|
|
|
/**
|
|
* Scroll Behavior:
|
|
* Controls the scrolling position when navigating between routes.
|
|
*
|
|
* @param {Object} to - The target route object.
|
|
* @param {Object} from - The current route object being left.
|
|
* @param {Object} savedPosition - The saved scroll position if navigating back/forward.
|
|
* @returns {Object} An object with `left` and `top` properties (for scrolling to coordinates).
|
|
*/
|
|
scrollBehavior(to, from, savedPosition) {
|
|
// If a saved position exists (e.g., from browser's back/forward, though less common with MemoryHistory), restore it.
|
|
if (savedPosition) {
|
|
return savedPosition;
|
|
} else {
|
|
// Otherwise, scroll to the top of the page. Added 'smooth' for a better user experience.
|
|
return { left: 0, top: 0, behavior: "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; |