Vue Router Base

Posted on  by admin

Type: RouteLocationRaw. Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so it can either be a string or a route location object. Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record.

Use of base in vue-router

Default: "router-link-active" (or global linkActiveClass). Class to apply on the rendered when the link is active. Type: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' (string).

Lazy loading

Default: "page". Value passed to the attribute aria-current when the link is exactly active. Whether should not wrap its content in an element. Useful when using v-slot to create a custom RouterLink.

By default, will render its content wrapped in an element, even when using v-slot.

Passing the custom prop, removes that behavior. Renders /home.

Renders /home. Default: "router-link-exact-active" (or global linkExactActiveClass).

Class to apply on the rendered when the link is exact active. exposes a low level customization through a scoped slot.

RouteLocationRaw #

This is a more advanced API that primarily targets library authors but can come in handy for developers as well, to build a custom component like a NavLink or other.

  1. Remember to pass the custom option to to prevent it from wrapping its content inside of an element.
  1. href: resolved url. This would be the href attribute of an element.

It contains the base if any was provided.

route: resolved normalized location. navigate: function to trigger the navigation. It will automatically prevent events when necessary, the same way router-link does, e.g.

Allows to apply an arbitrary class. Sometimes we may want the active class to be applied to an outer element rather than the element itself, in that case, you can wrap that element inside a router-link and use the v-slot properties to create your link:. If you add a target="_blank" to your a element, you must omit the @click="navigate" handler.

Default: "default". When a has a name, it will render the component with the corresponding name in the matched route record's components option.

See Also: Named Views. Type: RouteLocationNormalized.

A route location that has all of its component resolved (if any was lazy loaded) so it can be displayed.

exposes a v-slot API mainly to wrap your route components with and components.

Component: VNodes to be passed to a 's is prop. route: resolved normalized route location. Note you should be passing View components' props directly to the rather than the :.

Creates a Router instance that can be used by a Vue app. Check the RouterOptions for a list of all the properties that can be passed.

Creates an HTML5 history. Most common history for single page applications.

The application must be served through the http protocol. Creates a hash history. Useful for web applications with no host (e.g. file://) or when configuring a server to handle any URL isn't an option. Note you should use createWebHistory if SEO matters to you.

Creates a in-memory based history. The main purpose of this history is to handle SSR. It starts in a special location that is nowhere. If the user is not on a browser context, it's up to them to replace that location with the starter location by either calling router.push() or router.replace().

A history object that can be passed to the router constructor. Enumeration with all possible types for navigation failures.

Can be passed to isNavigationFailure to check for specific failures.

Never use any of the numerical values, always use the variables like NavigationFailureType.aborted. Type: RouteLocationNormalized. Initial route location where the router is. Can be used in navigation guards to differentiate the initial navigation.

Add a navigation guard that triggers whenever the component for the current location is about to be left.

Similar to beforeRouteLeave but can be used in any component.

The guard is removed when the component is unmounted. Add a navigation guard that triggers whenever the current location is about to be updated.

RouteRecordRaw #

Similar to beforeRouteUpdate but can be used in any component. The guard is removed when the component is unmounted. Returns everything exposed by the v-slot API.

Returns the current route location.

Equivalent to using $route inside templates.

Must be called inside of setup(). Returns the router instance. Equivalent to using $router inside templates.

How to use router params with Vue Router

Must be called inside of setup(). Here are some of the interfaces and types used by Vue Router. The documentation references them to give you an idea of the existing properties in objects.

Type: Ref.

Current route location. Type: RouterOptions. Original options object passed to create the Router. Add a new Route Record as the child of an existing route. If the route has a name and there is already an existing one with the same one, it removes it first.

createWebHashHistory #

Add a new route record to the router. If the route has a name and there is already an existing one with the same one, it removes it first. Note adding routes does not trigger a new navigation, meaning that the added route will not be displayed unless a new navigation is triggered.

Add a navigation hook that is executed after every navigation. Returns a function that removes the registered hook.

Go back in history if possible by calling history.back().

Equivalent to router.go(-1). Add a navigation guard that executes before any navigation.

Returns a function that removes the registered guard. Add a navigation guard that executes before navigation is about to be resolved.

At this state all component have been fetched and other navigation guards have been successful.

Returns a function that removes the registered guard.

Go forward in history if possible by calling history.forward(). Equivalent to router.go(1). Get a full list of all the route records.

Allows you to move forward or backward through the history.

Checks if a route with a given name exists.

Returns a Promise that resolves when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route.

If the initial navigation already happened, the promise resolves immediately.This is useful in server-side rendering to ensure consistent output on both the server and the client.

Note that on server side, you need to manually push the initial location while on client side, the router automatically picks it up from the URL.

Component Injections #

Adds an error handler that is called every time a non caught error happens during navigation. This includes errors thrown synchronously and asynchronously, errors returned or passed to next in any navigation guard, and errors occurred when trying to resolve an async component that is required to render a route.

Programmatically navigate to a new URL by pushing an entry in the history stack.

Remove an existing route by its name.

Programmatically navigate to a new URL by replacing the current entry in the history stack.

Returns the normalized version of a route location. Also includes an href property that includes any existing base. History implementation used by the router. Most web applications should use createWebHistory but it requires the server to be properly configured. You can also use a hash based history with createWebHashHistory that does not require any configuration on the server but isn't handled at all by search engines and does poorly on SEO.

Default class applied to active RouterLink.

If none is provided, router-link-active will be applied. Default class applied to exact active RouterLink.

TypeScript #

If none is provided, router-link-exact-active will be applied. Custom implementation to parse a query. Must decode query keys and values. See its counterpart, stringifyQuery. Let's say you want to use the package qs to parse queries, you can provide both parseQuery and stringifyQuery:.

Initial list of routes that should be added to the router. Function to control scrolling when navigating between pages. Can return a Promise to delay when the scrolling happens. See Scroll Behaviour for more details.