A routing system for H5 (web) applications in the Taro cross-platform framework, providing compatibility with mini-program routing specifications.
—
Mini-program compatible navigation system with promise-based callbacks, page stack management, and URL processing for relative paths and custom routes.
Navigate to a new page while keeping the current page in the page stack. Supports event channels for page communication.
/**
* Navigate to a new page, keeping current page in stack
* @param option - Navigation options with URL and callbacks
* @returns Promise resolving to navigation result with event channel
*/
function navigateTo(option: Taro.navigateTo.Option): Promise<TaroGeneral.CallbackResult>;
interface NavigateToOption extends Base {
/** Target page URL (relative or absolute) */
url: string;
/** Events to pass to target page via event channel */
events?: Record<string, any>;
}Usage Examples:
import { navigateTo } from "@tarojs/router";
// Basic navigation
await navigateTo({
url: "/profile?id=123",
success: (res) => {
console.log("Navigation successful", res);
// res.eventChannel available for page communication
},
fail: (err) => console.error("Navigation failed", err),
complete: () => console.log("Navigation completed")
});
// Navigation with event channel
await navigateTo({
url: "/detail",
events: {
onDataUpdate: (data) => console.log("Received data", data),
onError: (error) => console.error("Page error", error)
}
});
// Relative path navigation
await navigateTo({
url: "./subfolder/page" // Resolves relative to current page
});Redirect to a new page, replacing the current page in the stack. Current page will be unloaded.
/**
* Redirect to a new page, replacing current page
* @param option - Navigation options with URL and callbacks
* @returns Promise resolving to navigation result
*/
function redirectTo(option: Taro.redirectTo.Option): Promise<TaroGeneral.CallbackResult>;Usage Example:
import { redirectTo } from "@tarojs/router";
await redirectTo({
url: "/login",
success: () => console.log("Redirected to login"),
fail: (err) => console.error("Redirect failed", err)
});Navigate back in the page stack by a specified delta (number of pages).
/**
* Navigate back in the page stack
* @param option - Options with delta (defaults to {delta: 1})
* @returns Promise resolving to navigation result
*/
function navigateBack(option?: Taro.navigateBack.Option): Promise<TaroGeneral.CallbackResult>;
interface NavigateBackOption extends Base {
/** Number of pages to go back (minimum 1) */
delta: number;
}Usage Examples:
import { navigateBack } from "@tarojs/router";
// Go back one page (default)
await navigateBack();
// Go back multiple pages
await navigateBack({
delta: 2,
success: () => console.log("Navigated back 2 pages"),
fail: (err) => console.error("Navigate back failed", err)
});
// Go back to beginning of stack
await navigateBack({
delta: 999 // Will go back to first page if stack is smaller
});Switch to a tabbar page. If the target page is already in the tab cache, it will be shown instead of reloaded.
/**
* Switch to a tabbar page
* @param option - Tab switch options with URL and callbacks
* @returns Promise resolving to navigation result
*/
function switchTab(option: Taro.switchTab.Option): Promise<TaroGeneral.CallbackResult>;Usage Example:
import { switchTab } from "@tarojs/router";
await switchTab({
url: "/home", // Must be a tabbar page
success: () => console.log("Switched to home tab"),
fail: (err) => console.error("Tab switch failed", err)
});Relaunch the app with a new page, clearing the entire page stack.
/**
* Relaunch app with a new page, clearing all page stack
* @param option - Relaunch options with URL and callbacks
* @returns Promise resolving to navigation result
*/
function reLaunch(option: Taro.reLaunch.Option): Promise<TaroGeneral.CallbackResult>;Usage Example:
import { reLaunch } from "@tarojs/router";
await reLaunch({
url: "/welcome",
success: () => console.log("App relaunched"),
fail: (err) => console.error("Relaunch failed", err)
});Get the current page stack as an array of page instances. Not supported in multi-page mode.
/**
* Get current page stack (not supported in multi-page mode)
* @returns Array of current page instances with route information
*/
function getCurrentPages(): Taro.Page[];Usage Example:
import { getCurrentPages } from "@tarojs/router";
const pages = getCurrentPages();
console.log("Current page stack:", pages);
console.log("Current page:", pages[pages.length - 1]);
console.log("Total pages in stack:", pages.length);
// Each page object contains:
// - route: string (page path without query parameters)
// - path: string (full path with query parameters)
// - options: any (page parameters)interface Base {
/** Success callback function */
success?: (...args: any[]) => void;
/** Failure callback function */
fail?: (...args: any[]) => void;
/** Completion callback function (called regardless of success/failure) */
complete?: (...args: any[]) => void;
}
interface Option extends Base {
/** Target page URL (can be relative or absolute) */
url: string;
}
interface NavigateOption extends Base {
/** Target page URL */
url: string;
/** Events to pass to target page via event channel */
events?: Record<string, any>;
}./ and ../ path navigation relative to current page/ for consistencyInstall with Tessl CLI
npx tessl i tessl/npm-tarojs--router