|
| 1 | +# Resolving Routes |
| 2 | + |
| 3 | +## Getting all routes |
| 4 | + |
| 5 | +You can make use of [useRoutes](../../reference/client-api.md#useroutes) to get all routes information. |
| 6 | + |
| 7 | +The return value of `useRoutes` is a Ref object containing all routes. The keys are route paths of each route, and the values are the corresponding route information. |
| 8 | + |
| 9 | +```ts |
| 10 | +import { useRoutes } from 'vuepress/client' |
| 11 | + |
| 12 | +const routes = useRoutes() |
| 13 | +// { |
| 14 | +// '/': { meta: { title: 'Home' }, loader: HomePageLoader }, |
| 15 | +// '/404.html': { meta: { title: 'Not Found' }, loader: NotFoundPageLoader }, |
| 16 | +// ... |
| 17 | +// } |
| 18 | + |
| 19 | +const routePaths = computed(() => Object.keys(routes.value)) |
| 20 | +// => ['/‘, '/404.html', '/foo/', '/bar/', ...] |
| 21 | +``` |
| 22 | + |
| 23 | +## Resolving route path |
| 24 | + |
| 25 | +You can make use of [resolveRoutePath](../../reference/client-api.md#resolveroutepath) to resolve the route path of the given link. |
| 26 | + |
| 27 | +`resolveRoutePath` receives a link and an optional base path, and returns the resolved route path: |
| 28 | + |
| 29 | +```ts |
| 30 | +import { resolveRoutePath } from 'vuepress/client' |
| 31 | + |
| 32 | +const routePath = resolveRoutePath('/foo/') // => '/foo/' |
| 33 | +const routePath = resolveRoutePath('baz.html', '/foo/bar.html') // => '/foo/baz.html' |
| 34 | +``` |
| 35 | + |
| 36 | +## Resolving route information |
| 37 | + |
| 38 | +You can make use of [resolveRoute](../../reference/client-api.md#resolveroute) to resolve route information for a given link. |
| 39 | + |
| 40 | +`resolveRoute` receives a link and an optional base path, and returns the resolved route information: |
| 41 | + |
| 42 | +```ts |
| 43 | +import { resolveRoute } from 'vuepress/client' |
| 44 | + |
| 45 | +const route = resolveRoute('/foo/') // => { notFound: false, path: '/foo/', meta: { title: 'Foo' }, loader: FooPageLoader } |
| 46 | +const route = resolveRoute('baz.html', '/foo/bar.html') // => { notFound: false, path: '/foo/baz.html', meta: { title: 'Baz' }, loader: BazPageLoader } |
| 47 | +const route = resolveRoute('/not-exist.html') // => { notFound: true, path: '/not-exist.html', meta: { title: 'Not Found' }, loader: NotFoundPageLoader } |
| 48 | +``` |
| 49 | + |
| 50 | +There is a `notFound` field in the returned information, which is used to indicate whether a corresponding route exists for a given path. When the route does not exist, the `notFound` field would be `true`, the `path` field would be the normalized path, and the `meta` and `loader` fields would point to the default 404 page. |
0 commit comments