link: '/guide/essentials/dynamic-matching',
text: 'Dynamic Route Matching',
},
+ {
+ link: '/guide/essentials/route-matching-syntax',
+ text: "Routes' Matching Syntax",
+ },
{
link: '/guide/essentials/nested-routes',
text: 'Nested Routes',
A route location that has all of its component resolved (if any was lazy loaded) so it can be displayed.
+## `<router-view>`'s `v-slot`
+
+`<router-view>` exposes a `v-slot` API mainly to wrap your route components with `<transition>` and `<keep-alive>` components.
+
+```html
+<router-view v-slot="{ Component, route }">
+ <component :is="Component" />
+</router-view>
+```
+
+- `Component`: VNodes to be passed to a `<component>`'s `is` prop.
+- `route`: resolved normalized [route location](#routelocationnormalized).
+
## createRouter
Creates a Router instance that can be used by a Vue app. Check the [`RouterOptions`](#routeroptions) for a list of all the properties that can be passed.
Every guard function receives two arguments:
-- **`to`**: the target route location [in a normalized format](../../api/#the-route-object) being navigated to.
-- **`from`**: the current route location [in a normalized format](../../api/#the-route-object) being navigated away from.
+- **`to`**: the target route location [in a normalized format](/api/#routelocationnormalized) being navigated to.
+- **`from`**: the current route location [in a normalized format](/api/#routelocationnormalized) being navigated away from.
And can optionally return any of the following values:
- `false`: cancel the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the `from` route.
-- A [Route Location](../api#route-location): Redirect to a different location by passing a route location as if you were calling [`router.push()`](../api#router-push), which allows you to pass options like `replace: true` or `name: 'home'`. The current navigation is dropped and a new one is created with the same `from`.
+- A [Route Location](/api/#routelocationraw): Redirect to a different location by passing a route location as if you were calling [`router.push()`](/api/#push), which allows you to pass options like `replace: true` or `name: 'home'`. The current navigation is dropped and a new one is created with the same `from`.
-It's also possible to throw an `Error` if an unexpected situation was met. This will also cancel the navigation and call any callback registered via [`router.onError()`](../api#router-onerror).
+It's also possible to throw an `Error` if an unexpected situation was met. This will also cancel the navigation and call any callback registered via [`router.onError()`](/api/#onerror).
If nothing, `undefined` or `true` is returned, **the navigation is validated**, and the next navigation guard is called.
# Transitions
-In order to use transitions on your route components and animate navigations, you need to use the [v-slot API](../../api#v-slot):
+In order to use transitions on your route components and animate navigations, you need to use the [v-slot API](/api/#router-view-s-v-slot):
```html
<router-view v-slot="{ Component }">
</router-view>
```
-[All transition APIs](https://vuejs.org/guide/transitions.html) work the same here.
+[All transition APIs](https://v3.vuejs.org/guide/transitions-enterleave.html) work the same here.
## Per-Route Transition
| /users/:username | /users/eduardo | `{ username: 'eduardo' }` |
| /users/:username/posts/:postId | /users/eduardo/posts/123 | `{ username: 'eduardo', postId: '123' }` |
-In addition to `$route.params`, the `$route` object also exposes other useful information such as `$route.query` (if there is a query in the URL), `$route.hash`, etc. You can check out the full details in the [API Reference](../../api/#the-route-object).
+In addition to `$route.params`, the `$route` object also exposes other useful information such as `$route.query` (if there is a query in the URL), `$route.hash`, etc. You can check out the full details in the [API Reference](/api/#routelocationnormalized).
A working demo of this example can be found [here](https://codesandbox.io/embed/objective-dew-ogjbp?initialpath=%2Fusers%2Feduardo%2Fposts%2F1).
## Advanced Matching Patterns
-Vue Router uses its own path matching, inspired to the one used by `express`, so it supports many advanced matching patterns such as optional params, zero or more / one or more requirements, and even custom regex patterns. Please check the [Advanced Matching](../advanced/advanced-matching.md) documentation to explore them.
+Vue Router uses its own path matching, inspired to the one used by `express`, so it supports many advanced matching patterns such as optional params, zero or more / one or more requirements, and even custom regex patterns. Please check the [Advanced Matching](./route-matching-syntax.md) documentation to explore them.
## Example Server Configurations
-**Note**: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use [the `publicPath` option of Vue CLI](https://cli.vuejs.org/config/#publicpath) and the related [`base` property of the router](https://router.vuejs.org/api/#base). You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing `RewriteBase /` with `RewriteBase /name-of-your-subfolder/`).
+**Note**: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use [the `publicPath` option of Vue CLI](https://cli.vuejs.org/config/#publicpath) and the related [`base` property of the router](/api/#createwebhistory). You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing `RewriteBase /` with `RewriteBase /name-of-your-subfolder/`).
### Apache
# Route Matching Syntax
-Most applications will use static routes like `/about` and dynamic routes like `/users/:userId`, but Vue Router has much more to offer!
+Most applications will use static routes like `/about` and dynamic routes like `/users/:userId` like we just saw in [Dynamic Route Matching](./dynamic-matching.md), but Vue Router has much more to offer!
## Custom Regexp in params
## Debugging
-If you need to dig how your routes are transformed into Regexp to understand why a route isn't being matched or, to report a bug, you can use the [path ranker tool](https://paths.esm.dev). It supports sharing your routes through the URL.
+If you need to dig how your routes are transformed into Regexp to understand why a route isn't being matched or, to report a bug, you can use the [path ranker tool](https://paths.esm.dev/?p=AAMeJSyAwR4UbFDAFxAcAGAIJXMAAA..#). It supports sharing your routes through the URL.
::: tip Note
We will be using [ES2015](https://github.com/lukehoban/es6features) in the code samples in the guide.
-Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details [here](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only).
+Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details [here](https://v3.vuejs.org/guide/installation.html#runtime-compiler-vs-runtime-only).
:::
Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example:
# Introduction
-Vue Router is the official router for [Vue.js](http://vuejs.org). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:
+Vue Router is the official router for [Vue.js](http://v3.vuejs.org). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:
- Nested routes mapping
- Dynamic Routing
- Customizable Scroll Behavior
- Proper encoding for URLs
-[Get started](./guide/) or play with the [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (see [`README.md`](https://github.com/vuejs/vue-router-next) to run them).
+[Get started](/guide/) or play with the [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (see [`README.md`](https://github.com/vuejs/vue-router-next) to run them).
projects / thirdparty / vuejs / router.git / commitdiff
