or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdnavigation-management.mdrouter-creation.mdtypes.mdview-stacks.md
tile.json

tessl/npm-ionic--vue-router

Vue Router integration for @ionic/vue with Ionic-specific navigation features

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ionic/vue-router@8.7.x

To install, run

npx @tessl/cli install tessl/npm-ionic--vue-router@8.7.0

index.mddocs/

@ionic/vue-router

@ionic/vue-router is a Vue Router integration library specifically designed for Ionic Vue applications. It extends standard Vue Router functionality with Ionic-specific navigation features including view stack management, tab navigation support, and mobile-optimized routing behaviors.

Package Information

  • Package Name: @ionic/vue-router
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ionic/vue-router

Core Imports

import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory } from "@ionic/vue-router";

For TypeScript types (not available as main exports, access through internal paths if needed):

import type { IonicVueRouterOptions, RouteInfo, RouteAction, RouteDirection } from "@ionic/vue-router/dist/types/types";

For CommonJS:

const { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory } = require("@ionic/vue-router");

Basic Usage

import { createApp, inject } from 'vue';
import { createRouter, createWebHistory } from "@ionic/vue-router";
import App from './App.vue';

// Define routes
const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/about', component: () => import('./views/About.vue') },
];

// Create router with Ionic features
const router = createRouter({
  history: createWebHistory(),
  routes,
  tabsPrefix: '/tabs/' // Optional: prefix for tab-based routes
});

// Create and mount app
const app = createApp(App);
app.use(router);
app.mount('#app');

// Access providers in components
export default {
  setup() {
    const navManager = inject('navManager');     // Navigation management
    const viewStacks = inject('viewStacks');     // View stack management
    return { navManager, viewStacks };
  }
};

Architecture

@ionic/vue-router is built around several key components:

  • Enhanced Router Factory: createRouter function that wraps Vue Router with Ionic-specific capabilities
  • History Integration: Standard Vue Router history functions (web, hash, memory) for browser navigation
  • Navigation Manager: Internal router that handles Ionic-specific navigation state and animations
  • View Stack System: Manages multiple navigation stacks for complex mobile navigation patterns with multi-outlet support
  • Location History: Tracks route history with mobile-specific features like back button handling
  • Tab Support: Built-in support for tab-based navigation with customizable prefixes

The router enhances Vue Router by providing two key injected providers:

  • navManager: Programmatic navigation with Ionic-specific features
  • viewStacks: Advanced view stack management for complex navigation scenarios

Capabilities

Router Creation

Core router factory function and history utilities that create an enhanced Vue Router instance with Ionic navigation capabilities.

function createRouter(opts: IonicVueRouterOptions): Router;

interface IonicVueRouterOptions extends RouterOptions {
  tabsPrefix?: string;
}

Router Creation

Navigation Management

Programmatic navigation APIs with Ionic-specific features like animations, directions, and tab handling.

// Navigation methods available through injected navManager
interface NavigationManager {
  handleNavigate(
    path: RouteLocationRaw, 
    routerAction?: RouteAction, 
    routerDirection?: RouteDirection, 
    routerAnimation?: AnimationBuilder, 
    tab?: string
  ): void;
  handleNavigateBack(defaultHref?: string, routerAnimation?: AnimationBuilder): void;
  getCurrentRouteInfo(): RouteInfo;
  canGoBack(deep?: boolean): boolean;
  navigate(navigationOptions: ExternalNavigationOptions): void;
}

Navigation Management

View Stacks Management

Advanced view stack management system for handling complex navigation scenarios including multi-outlet routing, view lifecycle management, and component state preservation.

// View stack methods available through injected viewStacks provider
interface ViewStacksManager {
  size(): number;
  getViewStack(outletId: number): ViewItem[] | undefined;
  createViewItem(
    outletId: number,
    vueComponent: any,
    matchedRoute: RouteLocationMatched,
    routeInfo: RouteInfo,
    ionPage?: HTMLElement
  ): ViewItem;
  findViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: number): ViewItem | undefined;
  getChildrenToRender(outletId: number): ViewItem[];
}

View Stacks Management

Types and Interfaces

Complete TypeScript type definitions for all router functionality including route information, navigation parameters, and view management.

interface RouteInfo {
  id?: string;
  routerAction?: RouteAction;
  routerDirection?: RouteDirection;
  routerAnimation?: AnimationBuilder;
  pathname?: string;
  search?: string;
  params?: { [k: string]: any };
  tab?: string;
}

type RouteAction = "push" | "pop" | "replace";
type RouteDirection = "forward" | "back" | "root" | "none";

Types and Interfaces

Dependencies

  • @ionic/vue: Required dependency for AnimationBuilder type and Ionic integration
  • vue: Vue 3 framework for component system and reactivity
  • vue-router: Vue Router 4 for core routing functionality