tessl/npm-ionic--vue-router

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Router Creation

Name: tessl/npm-ionic--vue-router
Author: tessl

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

Capabilities

Router Factory

Creates an enhanced Vue Router instance with Ionic-specific navigation features.

/**
 * Creates an enhanced Vue Router instance with Ionic navigation capabilities
 * @param opts - Ionic Vue Router options extending standard RouterOptions
 * @returns Enhanced Router instance with Ionic navigation features
 */
function createRouter(opts: IonicVueRouterOptions): Router;

interface IonicVueRouterOptions extends RouterOptions {
  /** 
   * Optional prefix for tab-based routes. When set, routes starting with this prefix
   * will be treated as tab routes for navigation context
   */
  tabsPrefix?: string;
}

The returned router extends the standard Vue Router with additional providers:

navManager: Navigation manager for programmatic navigation
viewStacks: View stack management for complex navigation scenarios

Usage Examples:

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

// Basic router creation
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/profile', component: Profile }
  ]
});

// Router with tab support
const tabRouter = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/tabs/discover', component: Discover },
    { path: '/tabs/profile', component: Profile }
  ],
  tabsPrefix: '/tabs/' // Routes starting with /tabs/ treated as tab routes
});

Web History

Creates web history for browser-based navigation using HTML5 History API.

/**
 * Creates web history for the router using HTML5 History API
 * @param base - Optional base path for the application
 * @returns History instance for web applications
 */
function createWebHistory(base?: string): RouterHistory;

Usage Example:

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

const router = createRouter({
  history: createWebHistory('/app/'), // Base path for app
  routes: [...routes]
});

Web Hash History

Creates hash-based history for applications that cannot use HTML5 History API.

/**
 * Creates web hash history for the router using URL hash
 * @param base - Optional base path for the application  
 * @returns History instance using hash-based navigation
 */
function createWebHashHistory(base?: string): RouterHistory;

Usage Example:

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

const router = createRouter({
  history: createWebHashHistory(), // Uses # in URLs
  routes: [...routes]
});

Memory History

Creates memory-based history for server-side rendering or testing environments.

/**
 * Creates memory history for the router (no browser history)
 * @param base - Optional base path for the application
 * @returns History instance stored in memory
 */
function createMemoryHistory(base?: string): RouterHistory;

Usage Example:

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

const router = createRouter({
  history: createMemoryHistory(), // For SSR or tests
  routes: [...routes]
});