or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mdcomposables.mdindex.mdnavigation-guards.mdroute-configuration.mdrouter-instance.md
tile.json

tessl/npm-vue-router

Official router for Vue.js 2 providing declarative routing, navigation guards, and nested route configuration.

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

To install, run

npx @tessl/cli install tessl/npm-vue-router@3.6.0

index.mddocs/

Vue Router

Vue Router is the official client-side routing library for Vue.js 2, providing a comprehensive solution for building single-page applications with declarative route configuration, nested routes, programmatic navigation, and advanced features like route guards, lazy loading, and transition effects.

Package Information

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

Core Imports

import VueRouter from 'vue-router';
import { RouterLink, RouterView, NavigationFailureType, isNavigationFailure, START_LOCATION } from 'vue-router';

For CommonJS:

const VueRouter = require('vue-router');
// RouterLink and RouterView are registered as global components when Vue.use(VueRouter) is called

For Composition API (Vue 2.7+):

import { useRouter, useRoute } from 'vue-router/composables';

Basic Usage

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

// Define routes
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

// Create router instance
const router = new VueRouter({
  mode: 'history',
  routes
});

// Create and mount root instance
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Architecture

Vue Router is built around several key components:

  • VueRouter Class: Central router instance managing navigation and route matching
  • Route Configuration: Declarative route definitions with support for nesting and dynamic parameters
  • Navigation Guards: Hooks for controlling access and lifecycle during route transitions
  • Built-in Components: RouterLink and RouterView for declarative navigation and view rendering
  • History Management: Abstraction over browser history with multiple modes (hash, history, abstract)
  • Composition API: Vue 3-style composables for use with Vue 2.7+ composition API

Capabilities

Router Instance Management

Core router functionality for navigation, route matching, and configuration management.

class VueRouter {
  constructor(options?: RouterOptions);
  push(location: RawLocation): Promise<Route>;
  replace(location: RawLocation): Promise<Route>;
  go(n: number): void;
  back(): void;
  forward(): void;
}

Router Instance

Route Configuration

Route definition system supporting nested routes, dynamic parameters, and route-level configuration.

interface RouteConfig {
  path: string;
  component?: Component;
  name?: string;
  children?: RouteConfig[];
  redirect?: RedirectOption;
  meta?: RouteMeta;
}

interface RouterOptions {
  routes?: RouteConfig[];
  mode?: 'hash' | 'history' | 'abstract';
  base?: string;
}

Route Configuration

Navigation Guards

Comprehensive guard system for controlling route transitions with global, per-route, and component-level hooks.

type NavigationGuard = (to: Route, from: Route, next: NavigationGuardNext) => any;

beforeEach(guard: NavigationGuard): () => void;
beforeResolve(guard: NavigationGuard): () => void;
afterEach(hook: (to: Route, from: Route) => any): () => void;

Navigation Guards

Built-in Components

RouterLink and RouterView components for declarative navigation and route rendering.

interface RouterLinkProps {
  to: string | Location;
  replace?: boolean;
  append?: boolean;
  tag?: string;
}

interface RouterViewProps {
  name?: string;
}

Built-in Components

Composition API

Vue 3-style composables for accessing router functionality in composition API components.

function useRouter(): VueRouter;
function useRoute(): Route;
function onBeforeRouteUpdate(guard: NavigationGuard): void;
function onBeforeRouteLeave(guard: NavigationGuard): void;

Composition API

Core Types

interface Route {
  path: string;
  name?: string | null;
  hash: string;
  query: Dictionary<string | (string | null)[]>;
  params: Dictionary<string>;
  fullPath: string;
  matched: RouteRecord[];
  meta?: RouteMeta;
}

interface Location {
  name?: string;
  path?: string;
  hash?: string;
  query?: Dictionary<string | (string | null)[] | null | undefined>;
  params?: Dictionary<string>;
  append?: boolean;
  replace?: boolean;
}

type RawLocation = string | Location;
type Dictionary<T> = { [key: string]: T };