mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-20 07:30:57 +00:00
docs: update links to vue-router
docs (#20454)
This commit is contained in:
parent
5a0ec804c2
commit
2d4ca20f3b
@ -11,7 +11,7 @@ Within the template of a Vue component, you can access the router using `$router
|
||||
|
||||
If you have a `pages/` folder, `useRouter` is identical in behavior to the one provided by `vue-router`. Feel free to read the router documentation for more information on what each method does.
|
||||
|
||||
::ReadMore{link="https://router.vuejs.org/api/#currentroute"}
|
||||
::ReadMore{link="https://router.vuejs.org/api/interfaces/Router.html#Properties-currentRoute"}
|
||||
::
|
||||
|
||||
## Basic Manipulation
|
||||
@ -58,7 +58,7 @@ However, Nuxt has a concept of **route middleware** that simplifies the implemen
|
||||
- **onError:** Adds an error handler that is called every time a non caught error happens during navigation.
|
||||
- **resolve:** Returns the normalized version of a route location. Also includes an `href` property that includes any existing base.
|
||||
|
||||
::ReadMore{link="https://router.vuejs.org/api/#router-methods"}
|
||||
::ReadMore{link="https://router.vuejs.org/api/interfaces/Router.html#Methods"}
|
||||
::
|
||||
|
||||
## Universal Router Instance
|
||||
|
@ -7,7 +7,7 @@ description: The NuxtPage component is required to display pages located in the
|
||||
|
||||
`<NuxtPage>` is a built-in component that comes with Nuxt. `NuxtPage` is required to display top-level or nested pages located in the `pages/` directory.
|
||||
|
||||
`NuxtPage` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/#router-view-props) component from Vue Router. `NuxtPage` component accepts same `name` and `route` props.
|
||||
`NuxtPage` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) component from Vue Router. `NuxtPage` component accepts same `name` and `route` props.
|
||||
|
||||
- **name:** type: `string`
|
||||
|
||||
|
@ -73,19 +73,19 @@ In this example, we use `<NuxtLink>` with `target`, `rel`, and `noRel` props.
|
||||
|
||||
## Props
|
||||
|
||||
- **to**: Any URL or a [route location object](https://router.vuejs.org/api/#routelocationraw) from Vue Router
|
||||
- **to**: Any URL or a [route location object](https://router.vuejs.org/api/interfaces/RouteLocation.html) from Vue Router
|
||||
- **href**: An alias for `to`. If used with `to`, `href` will be ignored
|
||||
- **target**: A `target` attribute value to apply on the link
|
||||
- **rel**: A `rel` attribute value to apply on the link. Defaults to `"noopener noreferrer"` for external links.
|
||||
- **noRel**: If set to `true`, no `rel` attribute will be added to the link
|
||||
- **activeClass**: A class to apply on active links. Works the same as [Vue Router's `active-class` prop](https://router.vuejs.org/api/#active-class) on internal links. Defaults to Vue Router's default (`"router-link-active"`)
|
||||
- **exactActiveClass**: A class to apply on exact active links. Works the same as [Vue Router's `exact-active-class` prop](https://router.vuejs.org/api/#exact-active-class) on internal links. Defaults to Vue Router's default `"router-link-exact-active"`)
|
||||
- **replace**: Works the same as [Vue Router's `replace` prop](https://router.vuejs.org/api/#replace) on internal links
|
||||
- **ariaCurrentValue**: An `aria-current` attribute value to apply on exact active links. Works the same as [Vue Router's `aria-current-value` prop](https://router.vuejs.org/api/#aria-current-value) on internal links
|
||||
- **activeClass**: A class to apply on active links. Works the same as [Vue Router's `active-class` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-activeClass) on internal links. Defaults to Vue Router's default (`"router-link-active"`)
|
||||
- **exactActiveClass**: A class to apply on exact active links. Works the same as [Vue Router's `exact-active-class` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-exactActiveClass) on internal links. Defaults to Vue Router's default `"router-link-exact-active"`)
|
||||
- **replace**: Works the same as [Vue Router's `replace` prop](https://router.vuejs.org/api/interfaces/RouteLocationOptions.html#Properties-replace) on internal links
|
||||
- **ariaCurrentValue**: An `aria-current` attribute value to apply on exact active links. Works the same as [Vue Router's `aria-current-value` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-ariaCurrentValue) on internal links
|
||||
- **external**: Forces the link to be considered as external (`true`) or internal (`false`). This is helpful to handle edge-cases
|
||||
- **prefetch** and **noPrefetch**: Whether to enable prefetching assets for links that enter the view port.
|
||||
- **prefetchedClass**: A class to apply to links that have been prefetched.
|
||||
- **custom**: Whether `<NuxtLink>` should wrap its content in an `<a>` element. It allows taking full control of how a link is rendered and how navigation works when it is clicked. Works the same as [Vue Router's `custom` prop](https://router.vuejs.org/api/#custom)
|
||||
- **custom**: Whether `<NuxtLink>` should wrap its content in an `<a>` element. It allows taking full control of how a link is rendered and how navigation works when it is clicked. Works the same as [Vue Router's `custom` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom)
|
||||
|
||||
::alert{icon=👉}
|
||||
Defaults can be overwritten, see [overwriting defaults](#overwriting-defaults) if you want to change them.
|
||||
@ -121,8 +121,8 @@ defineNuxtLink({
|
||||
|
||||
- **componentName**: A name for the defined `<NuxtLink>` component.
|
||||
- **externalRelAttribute**: A default `rel` attribute value applied on external links. Defaults to `"noopener noreferrer"`. Set it to `""` to disable
|
||||
- **activeClass**: A default class to apply on active links. Works the same as [Vue Router's `linkActiveClass` option](https://router.vuejs.org/api/#linkactiveclass). Defaults to Vue Router's default (`"router-link-active"`)
|
||||
- **exactActiveClass**: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/#linkexactactiveclass). Defaults to Vue Router's default (`"router-link-exact-active"`)
|
||||
- **activeClass**: A default class to apply on active links. Works the same as [Vue Router's `linkActiveClass` option](https://router.vuejs.org/api/interfaces/RouterOptions.html#Properties-linkActiveClass). Defaults to Vue Router's default (`"router-link-active"`)
|
||||
- **exactActiveClass**: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/interfaces/RouterOptions.html#Properties-linkExactActiveClass). Defaults to Vue Router's default (`"router-link-exact-active"`)
|
||||
- **prefetchedClass**: A default class to apply to links that have been prefetched.
|
||||
- **trailingSlash**: An option to either add or remove trailing slashes in the `href`. If unset or not matching the valid values `append` or `remove`, it will be ignored.
|
||||
|
||||
|
@ -29,7 +29,7 @@ Make sure to always use `await` or `return` on result of `navigateTo` when calli
|
||||
|
||||
### `to`
|
||||
|
||||
**Type**: [`RouteLocationRaw`](https://router.vuejs.org/api/#routelocationraw) | `undefined` | `null`
|
||||
**Type**: [`RouteLocationRaw`](https://router.vuejs.org/api/interfaces/RouteLocation.html) | `undefined` | `null`
|
||||
|
||||
**Default**: `'/'`
|
||||
|
||||
|
@ -7,5 +7,5 @@ description: The onBeforeRouteLeave composable allows registering a route guard
|
||||
|
||||
The `onBeforeRouteLeave` composable adds a navigation guard that triggers whenever the component for the current location is about to be left.
|
||||
|
||||
::ReadMore{link="https://router.vuejs.org/api/index.html#onbeforerouteleave"}
|
||||
::ReadMore{link="https://router.vuejs.org/api/#Functions-onBeforeRouteLeave"}
|
||||
::
|
||||
|
@ -7,5 +7,5 @@ description: The onBeforeRouteUpdate composable allows registering a route guard
|
||||
|
||||
The `onBeforeRouteUpdate` composable adds a navigation guard that triggers whenever the component for the current location is about to be updated.
|
||||
|
||||
::ReadMore{link="https://router.vuejs.org/api/index.html#onbeforerouteupdate"}
|
||||
::ReadMore{link="https://router.vuejs.org/api/#Functions-onBeforeRouteUpdate"}
|
||||
::
|
||||
|
Loading…
Reference in New Issue
Block a user