tessl/npm-vue-router

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

—

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

Vue Router

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

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 };