website·Indexed 29 days ago
https://vue-router-ru.netlify.app/API reference for Vue Router, featuring detailed documentation on interfaces such as RouteLocationRaw, RouterLinkProps, RouteRecordSingleView, and NavigationGuardNext, as well as enumerations like ErrorTypes.
Vue Router is the official router for Vue.js, designed to facilitate the creation of single-page applications (SPAs) through deep integration with the Vue.js core. Key capabilities include:
_RouteRecordBase is an internal interface that defines the common properties for all types of RouteRecordRaw. It serves as the base for more specific route record types such as RouteRecordSingleView, RouteRecordMultipleViews, and RouteRecordRedirect.RouteLocationMatched interface represents a normalized version of a RouteRecord. It extends RouteRecordNormalized and is used by Vue Router to manage matched route locations, providing access to the route's configuration, components, and navigation guards.RouteRecordSingleView interface represents a route record that defines a single component to be displayed using the component option. It inherits from _RouteRecordBase.RouteRecordSingleViewWithChildren interface represents a route record that defines a single component intended to host a nested view. It inherits from _RouteRecordBase and is used when a route has a specific component and a set of child routes.onBeforeRouteLeave function adds a navigation hook that triggers whenever the component corresponding to the current route is about to be left. Unlike beforeRouteLeave, this can be used in any component. The hook is automatically removed when the component is unmounted.NavigationFailure interface is an extended error object used by Vue Router to provide detailed information about why a navigation attempt failed. It extends the standard JavaScript Error class and includes specific routing context such as the source and destination routes, as well as the failure type.// Example of how a NavigationFailure might be structured
interface NavigationFailure extends Error {
from: RouteLocationNormalizedGeneric;
to: RouteLocationNormalizedGeneric;
type: NavigationFailureType;
cause?: unknown;
message: string;
name: string;
stack?: string;
}RouterHistory interface defines the implementation of history management that can be passed to a router via the Router.history option. It provides a standardized way to interact with the browser's history API, supporting both HTML5 History and other modes.onBeforeRouteUpdate function adds a navigation hook that triggers whenever the current route is about to be updated. Similar to beforeRouteUpdate, this can be used in any component and is automatically removed upon component unmount.The mode option has been replaced by the history option. You must now use a specific history function based on your requirements:
"history"): use createWebHistory()"hash"): use createWebHashHistory()"abstract"): use createMemoryHistory()import { createRouter, createWebHistory } from 'vue-router'
createRouter({
history: createWebHistory(),
routes: [],
})
router.afterEach hook to inject the appropriate transition name into the meta field based on the path length.router.afterEach((to, from) => {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition">
<component :is="Component" />
</transition>
</router-view>