diff --git a/.github/contributing.md b/.github/contributing.md index f48225ced..087e09b95 100644 --- a/.github/contributing.md +++ b/.github/contributing.md @@ -17,7 +17,7 @@ Hi! I'm really excited that you are interested in contributing to Vue Router. Be ## Pull Request Guidelines -- Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch. +- Check out a topic branch from a base branch, e.g. `main`, and merge back against that branch. - If adding a new feature: @@ -26,7 +26,7 @@ Hi! I'm really excited that you are interested in contributing to Vue Router. Be - If fixing bug: - - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`. + - If you are resolving a particular issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`. - Provide a detailed description of the bug in the PR. Live demo preferred. - Add appropriate test coverage if applicable. You can check the coverage of your code addition by running `pnpm test --coverage`. @@ -48,7 +48,7 @@ After cloning the repo, run: pnpm install # install the dependencies of the project ``` -A high level overview of tools used: +A high-level overview of tools used: - [TypeScript](https://www.typescriptlang.org/) as the development language - [Rollup](https://rollupjs.org) for bundling @@ -63,7 +63,7 @@ The `build` script builds vue-router ### `pnpm play` -The `play` scripts starts a playground project located at `playground/` that allows you to test things on a browser. +The `play` script starts a playground project located at `playground/`, allowing you to test things on a browser. ```bash pnpm play @@ -91,66 +91,77 @@ $ pnpm jest --watch Vue Router source code can be found in the `src` directory: - `src/history`: history implementations that are instantiable with `create*History()`. This folder contains code related to using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). -- `src/matcher`: RouteMatcher implementation. Contains the code that transforms paths like `/users/:id` into regexps and handle the transformation of locations like `{ name: 'UserDetail', params: { id: '2' } }` to strings. It contains path ranking logic and the part of dynamic routing that concerns matching urls in the right order. -- `src/utils`: contains small utility functions that are used across other sections of the router but are not contained by them. -- `src/router`: contains the router creation, navigation execution, using the matcher, the history implementation. It runs navigation guards. -- `src/location`: helpers related to route location and urls -- `src/encoding`: helpers related to url encoding +- `src/matcher`: RouteMatcher implementation. Contains the code that transforms paths like `/users/:id` into regexps and handles the transformation of locations like `{ name: 'UserDetail', params: { id: '2' } }` to strings. It contains path ranking logic and the part of dynamic routing that concerns matching URLs in the correct order. +- `src/utils`: contains small utility functions used across other router +- `src/router`: contains the router creation, navigation execution, matcher use, and history implementation. It runs navigation guards. +- `src/location`: helpers related to route location and URLs +- `src/encoding`: helpers related to URL encoding - `src/errors`: different internal and external errors with their messages -- `src/index`: contains all public API as exports. -- `src/types`: contains global types that are used across multiple sections of the router. +- `src/index` contains all public APIs as exports. +- `src/types`: contains global types used across multiple router sections. ## Contributing Tests Unit tests are located inside `__tests__`. Consult the [Jest docs](https://jestjs.io/docs/en/using-matchers) and existing test cases for how to write new test specs. Here are some additional guidelines: - Use the minimal API needed for a test case. For example, if a test can be written without involving the reactivity system or a component, it should be written so. This limits the test's exposure to changes in unrelated parts and makes it more stable. -- Use the minimal API needed for a test case. For example, if a test concerns the `router-link` component, don't create a router instance, mock the needed properties instead. +- Use the minimal API needed for a test case. For example, if a test concerns the `router-link` component, don't create a router instance, mock the required properties instead. - Write a unit test whenever possible -- If a test is specific to a browser, create an e2e (end to end) test and make sure to indicate it on the test +- If a test is specific to a browser, create an e2e (end-to-end) test and make sure to indicate it on the test ## Contributing Docs -Currently, all the docs can be found in `packages/docs`. It contains the English markdown files while translation(s) are stored in their corresponding `` sub-folder(s): +All the documentation files can be found in `packages/docs`. It contains the English markdown files while translation(s) are stored in their corresponding `` sub-folder(s): - [`zh`](https://github.com/vuejs/router/tree/main/packages/docs/zh): Chinese translation. -Besides that, the `.vitepress` sub-folder is used to put the config and theme, including the i18n information. +Besides that, the `.vitepress` sub-folder contains the config and theme, including the i18n information. -Consider the following two options in order to contribute to the translations: +Contributing to the English docs is the same as contributing to the source code. You can create a pull request to our GitHub repo. However, if you would like to contribute to the translations, there are two options and some extra steps to follow: ### Translate in a `` sub-folder and host it on our official repo -If you want to start translating the docs in a new language: +If you want to start translating the docs in a _new_ language: 1. Create the corresponding `` sub-folder for your translation. -2. Modify the i18n config in `.vitepress` sub-folder. +2. Modify the i18n configuration in the `.vitepress` sub-folder. 3. Translate the docs and run the doc site to self-test locally. -4. Once you have done all above, create a pull request to our GitHub repo. +4. Create a checkpoint for your language by running `pnpm run docs:translation:update []`. A checkpoint is the hash and date of the latest commit when you do the translation. The checkpoint information is stored in the status file `packages/docs/.vitepress/translation-status.json`. _It's crucial for long-term maintenance since all the further translation sync-ups are based on their previous checkpoints._ Usually, you can skip the commit argument because the default value is `main`. +5. Commit all the changes and create a pull request to our GitHub repo. -If you want to maintain a existing translation: +We will have a paragraph at the top of each translation page that shows the translation status. That way, users can quickly determine if the translation is up-to-date or lags behind the English version. -1. (Repo permission required) First of all, make sure there is a _checkpoint_ branch for the language. Usually it's named as `docs-sync-`. Notice that: - - This branch is always synced to the commit of the original docs that the latest translation of your language is corresponding to. Like `docs-sync-zh` is always to the commit of the original docs that the latest Chinese translation is corresponding to. - - Technically, this checkpoint branch should be only updated if the translation is synced to a nearer commit of the original docs. Usually the commit is the HEAD of the `main` branch at that moment. -2. See what translation you need to do to sync up with the original docs. There are 2 popular ways: - - Git diff command: e.g. `git diff docs-sync-zh..main packages/docs # > debug.log`, or - - GitHub Compare page: e.g. https://github.com/vuejs/router/compare/docs-sync-zh...main (only see the changes in `packages/docs/*`) -3. Create your own branch and start the translation update, following the diff or compare. -4. Once you have done all above, create a pull request to our GitHub repo. - - It's highly recommended to commit with message like `docs(): sync update to `. e.g. `docs(zh): sync update to e008551`. -5. (Repo permission required) **VERY IMPORTANT**: after the pull request is merged, for the future batch of sync-up, do another merge from the latest commit at that moment to the checkpoint branch. e.g. merge commit `e008551` to branch `docs-sync-zh`. +Speaking of the up-to-date translation, we also need good long-term maintenance for every language. If you want to _update_ an existing translation: -For more real examples, please check out [all the PRs with title "docs(zh): sync" after 2023-01-01](https://github.com/vuejs/router/pulls?q=is%3Apr+created%3A%3E2023-01-01+docs%28zh%29+sync). +1. See what translation you need to sync up with the original docs. There are two popular ways: + 1. Via the [GitHub Compare](https://github.com/vuejs/router/compare/) page, only see the changes in `packages/docs/*` from the checkpoint hash to `main` branch. You can find the checkpoint hash for your language via the translation status file `packages/docs/.vitepress/translation-status.json`. The compare page can be directly opened with the hash as part of the URL, e.g. https://github.com/vuejs/router/compare/e008551...main + 2. Via a local command: `pnpm run docs:translation:compare []`. +2. Create your own branch and start the translation update, following the previous comparison. +3. Create a checkpoint for your language by running `pnpm run docs:translation:update []`. +4. Commit all the changes and create a pull request to our GitHub repo. + + ### Self-host the translation -You can also host the translation on your own. To create one, just simply fork our GitHub repo and change the content and site config in `packages/docs`. To long-term maintain it, we _highly recommend_ a similar way that we do above for our officially hosted translations: +You can also host the translation on your own. To create one, fork our GitHub repo and change the content and site config in `packages/docs`. To long-term maintain it, we _highly recommend_ a similar way that we do above for our officially hosted translations: + +- Ensure you maintain the _checkpoint_ properly. Also, ensure the _translation status_ is well-displayed on the top of each translation page. +- Utilize the diff result between the latest official repository and your own checkpoint to guide your translation. + +Tip: you can add the official repo as a remote to your forked repo. This way, you can still run `pnpm run docs:translation:update []` and `npm run docs:translation:compare []` to get the checkpoint and diff result: -1. Ensure you create a _checkpoint branch_ (for example, a branch named sync). This branch should always align with the commit of the original documentation that corresponds to your most recent translation. -2. Utilize the diff result between the latest official repository and your own by using the git diff command or the GitHub Compare page to guide your translation. -3. Complete the translation process. -4. Update the _checkpoint branch_ accordingly. +```bash +# prepare the upstream remote +git remote add upstream git@github.com:vuejs/router.git +git fetch upstream main + +# set the checkpoint +pnpm run docs:translation:update upstream/main + +# get the diff result +pnpm run docs:translation:compare upstream/main +``` diff --git a/.prettierignore b/.prettierignore index 0442789cf..fbe4183e8 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,4 @@ __build__ dist coverage +tests_output diff --git a/README.md b/README.md index c59bedafb..578d76d97 100644 --- a/README.md +++ b/README.md @@ -12,16 +12,6 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje -

Gold Sponsors

-

- - - - VueJobs - - -

-

Silver Sponsors

@@ -42,8 +32,8 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje

- - Stanislas Ormières + + Stanislas Ormières @@ -58,10 +48,10 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje Storyblok - + - - NuxtJS + + Nuxt UI Pro Templates

diff --git a/netlify.toml b/netlify.toml index 17cb11329..798623f0a 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,5 +1,6 @@ [build.environment] CHROMEDRIVER_SKIP_DOWNLOAD = "true" +NODE_VERSION = "18" [build] command = "pnpm run docs:build" diff --git a/package.json b/package.json index e3ad7d2ba..b11af27d9 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "@vue/router-root", "private": true, - "packageManager": "pnpm@8.5.0", + "packageManager": "pnpm@8.15.3", "engines": { - "node": ">=18.14.0" + "node": ">=20.9.0" }, "workspaces": [ "packages/*" @@ -13,8 +13,13 @@ "size": "node scripts/check-size.mjs", "build": "pnpm run -r build", "build:dts": "pnpm run -r build:dts", + "docs": "pnpm run --filter ./packages/docs -r docs", "docs:api": "pnpm run --filter ./packages/docs -r docs:api", + "docs:translation:compare": "pnpm run --filter ./packages/docs -r docs:translation:compare", + "docs:translation:update": "pnpm run --filter ./packages/docs -r docs:translation:update", + "docs:translation:status": "pnpm run --filter ./packages/docs -r docs:translation:status", "docs:build": "pnpm run docs:api && pnpm run --filter ./packages/docs -r docs:build", + "docs:preview": "pnpm run --filter ./packages/docs -r docs:preview", "play": "pnpm run -r play", "build:size": "pnpm run -r build:size", "lint": "pnpm run lint:script && pnpm run lint:html", @@ -25,23 +30,23 @@ }, "devDependencies": { "brotli": "^1.3.3", - "chalk": "^4.1.2", - "enquirer": "^2.3.6", - "execa": "^6.1.0", - "globby": "^13.1.3", - "lint-staged": "^13.1.2", + "chalk": "^5.3.0", + "enquirer": "^2.4.1", + "execa": "^8.0.1", + "globby": "^14.0.1", + "lint-staged": "^15.2.2", "minimist": "^1.2.8", "p-series": "^3.0.0", - "prettier": "^2.8.4", - "semver": "^7.3.8", - "typedoc": "^0.23.26", - "typedoc-plugin-markdown": "^3.14.0", - "typescript": "~4.9.5", + "prettier": "^2.8.8", + "semver": "^7.6.0", + "typedoc": "^0.25.8", + "typedoc-plugin-markdown": "^3.17.1", + "typescript": "~5.3.3", "yorkie": "^2.0.0" }, "gitHooks": { "pre-commit": "lint-staged", - "commit-msg": "node scripts/verifyCommit.js" + "commit-msg": "node scripts/verifyCommit.mjs" }, "lint-staged": { "*.js": [ @@ -61,6 +66,6 @@ } }, "volta": { - "node": "18.16.0" + "node": "20.11.1" } } diff --git a/packages/docs/.vitepress/config/en.ts b/packages/docs/.vitepress/config/en.ts index aa43a5ee8..70042ff08 100644 --- a/packages/docs/.vitepress/config/en.ts +++ b/packages/docs/.vitepress/config/en.ts @@ -44,6 +44,10 @@ export const enConfig: LocaleSpecificConfig = { text: 'Changelog', link: 'https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md', }, + { + text: 'Vue.js Certification', + link: 'https://certification.vuejs.org/?friend=VUEROUTER', + }, ], }, ], @@ -130,6 +134,10 @@ export const enConfig: LocaleSpecificConfig = { text: 'Composition API', link: '/guide/advanced/composition-api.html', }, + { + text: 'RouterView slot', + link: '/guide/advanced/router-view-slot.html', + }, { text: 'Transitions', link: '/guide/advanced/transitions.html', diff --git a/packages/docs/.vitepress/config/index.ts b/packages/docs/.vitepress/config/index.ts index 0feb87abf..4b680a48c 100644 --- a/packages/docs/.vitepress/config/index.ts +++ b/packages/docs/.vitepress/config/index.ts @@ -9,5 +9,8 @@ export default defineConfig({ locales: { root: { label: 'English', lang: 'en-US', link: '/', ...enConfig }, zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig }, + ko: { label: '한국어', lang: 'ko-KR', link: 'https://router.vuejs.kr/' }, + pt: { label: 'Português', lang: 'pt-PT', link: 'https://vue-router-docs-pt.netlify.app/' }, + ru: { label: 'Русский', lang: 'ru-RU', link: 'https://vue-router-ru.netlify.app' }, }, }) diff --git a/packages/docs/.vitepress/config/shared.ts b/packages/docs/.vitepress/config/shared.ts index a028d2f0a..ee38ec511 100644 --- a/packages/docs/.vitepress/config/shared.ts +++ b/packages/docs/.vitepress/config/shared.ts @@ -1,4 +1,5 @@ import { defineConfig, HeadConfig } from 'vitepress' +import { zhSearch } from './zh' // TODO: // export const META_IMAGE = 'https://router.vuejs.org/social.png' @@ -10,15 +11,35 @@ if (process.env.NETLIFY) { console.log('Netlify build', process.env.CONTEXT) } +const rControl = /[\u0000-\u001f]/g +const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’<>,.?/]+/g +const rCombining = /[\u0300-\u036F]/g + +/** + * Default slugification function + */ +export const slugify = (str: string): string => + str + .normalize('NFKD') + // Remove accents + .replace(rCombining, '') + // Remove control characters + .replace(rControl, '') + // Replace special characters + .replace(rSpecial, '-') + // ensure it doesn't start with a number + .replace(/^(\d)/, '_$1') + const productionHead: HeadConfig[] = [ - [ - 'script', - { - src: 'https://unpkg.com/thesemetrics@latest', - async: '', - type: 'text/javascript', - }, - ], + // NOTE: removed because there is a bug that makes it load forever + // [ + // 'script', + // { + // src: 'https://unpkg.com/thesemetrics@latest', + // async: '', + // type: 'text/javascript', + // }, + // ], ] export const sharedConfig = defineConfig({ @@ -35,6 +56,10 @@ export const sharedConfig = defineConfig({ leftDelimiter: '%{', rightDelimiter: '}%', }, + + anchor: { + slugify, + }, }, head: [ @@ -69,6 +94,16 @@ export const sharedConfig = defineConfig({ // }, // ], + [ + 'script', + { + src: 'https://cdn.usefathom.com/script.js', + 'data-site': 'RENJQDQI', + 'data-spa': 'auto', + defer: '', + }, + ], + // Vue School Top banner [ 'script', @@ -88,7 +123,7 @@ export const sharedConfig = defineConfig({ outline: [2, 3], socialLinks: [ - { icon: 'twitter', link: 'https://twitter.com/posva' }, + { icon: 'x', link: 'https://twitter.com/posva' }, { icon: 'github', link: 'https://github.com/vuejs/router', @@ -109,10 +144,14 @@ export const sharedConfig = defineConfig({ text: 'Suggest changes', }, - algolia: { - appId: 'BTNTW3I1XP', - apiKey: '771d10c8c5cc48f7922f15048b4d931c', - indexName: 'next_router_vuejs', + search: { + provider: 'algolia', + options: { + appId: 'BTNTW3I1XP', + apiKey: '771d10c8c5cc48f7922f15048b4d931c', + indexName: 'next_router_vuejs', + locales: { ...zhSearch }, + }, }, carbonAds: { diff --git a/packages/docs/.vitepress/config/zh.ts b/packages/docs/.vitepress/config/zh.ts index 985730c40..7d7425c11 100644 --- a/packages/docs/.vitepress/config/zh.ts +++ b/packages/docs/.vitepress/config/zh.ts @@ -48,6 +48,10 @@ export const zhConfig: LocaleSpecificConfig = { text: '更新日志', link: 'https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md', }, + { + text: 'Vue.js 认证', + link: 'https://certification.vuejs.org/?friend=VUEROUTER', + }, ], }, ], @@ -56,7 +60,7 @@ export const zhConfig: LocaleSpecificConfig = { '/zh/api/': [ { text: 'packages', - items: [{ text: 'vue-router', link: '/api/' }], + items: [{ text: 'vue-router', link: '/zh/api/' }], }, ], @@ -139,6 +143,10 @@ export const zhConfig: LocaleSpecificConfig = { text: '组合式 API', link: '/zh/guide/advanced/composition-api.html', }, + { + text: 'RouterView 插槽', + link: '/zh/guide/advanced/router-view-slot.html', + }, { text: '过渡动效', link: '/zh/guide/advanced/transitions.html', @@ -153,7 +161,7 @@ export const zhConfig: LocaleSpecificConfig = { }, { text: '类型化路由', - link: '/zh/guide/advanced/typed-routes.html' + link: '/zh/guide/advanced/typed-routes.html', }, { text: '扩展 RouterLink', @@ -185,3 +193,47 @@ export const zhConfig: LocaleSpecificConfig = { }, }, } + +export const zhSearch: DefaultTheme.AlgoliaSearchOptions['locales'] = { + zh: { + placeholder: '搜索文档', + translations: { + button: { + buttonText: '搜索文档', + buttonAriaLabel: '搜索文档', + }, + modal: { + searchBox: { + resetButtonTitle: '清除查询条件', + resetButtonAriaLabel: '清除查询条件', + cancelButtonText: '取消', + cancelButtonAriaLabel: '取消', + }, + startScreen: { + recentSearchesTitle: '搜索历史', + noRecentSearchesText: '没有搜索历史', + saveRecentSearchButtonTitle: '保存至搜索历史', + removeRecentSearchButtonTitle: '从搜索历史中移除', + favoriteSearchesTitle: '收藏', + removeFavoriteSearchButtonTitle: '从收藏中移除', + }, + errorScreen: { + titleText: '无法获取结果', + helpText: '你可能需要检查你的网络连接', + }, + footer: { + selectText: '选择', + navigateText: '切换', + closeText: '关闭', + searchByText: '搜索供应商', + }, + noResultsScreen: { + noResultsText: '无法找到相关结果', + suggestedQueryText: '你可以尝试查询', + reportMissingResultsText: '你认为该查询应该有结果？', + reportMissingResultsLinkText: '点击反馈', + }, + }, + }, + }, +} diff --git a/packages/docs/.vitepress/theme/components/AsideSponsors.vue b/packages/docs/.vitepress/theme/components/AsideSponsors.vue new file mode 100644 index 000000000..7066c8bab --- /dev/null +++ b/packages/docs/.vitepress/theme/components/AsideSponsors.vue @@ -0,0 +1,82 @@ + + + diff --git a/packages/docs/.vitepress/theme/components/HomeSponsorsGroup.vue b/packages/docs/.vitepress/theme/components/HomeSponsorsGroup.vue index 8e876c6f6..95b4aabcf 100644 --- a/packages/docs/.vitepress/theme/components/HomeSponsorsGroup.vue +++ b/packages/docs/.vitepress/theme/components/HomeSponsorsGroup.vue @@ -1,3 +1,28 @@ + + - - diff --git a/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue b/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue new file mode 100644 index 000000000..7db3f6124 --- /dev/null +++ b/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue @@ -0,0 +1,291 @@ + + + + + + diff --git a/packages/docs/.vitepress/theme/components/VueMasteryHomeLink.vue b/packages/docs/.vitepress/theme/components/VueMasteryHomeLink.vue index 6bde6b7ca..af29f92db 100644 --- a/packages/docs/.vitepress/theme/components/VueMasteryHomeLink.vue +++ b/packages/docs/.vitepress/theme/components/VueMasteryHomeLink.vue @@ -1,47 +1,51 @@ - + - \ No newline at end of file + diff --git a/packages/docs/.vitepress/theme/components/VueMasteryLogoLink.vue b/packages/docs/.vitepress/theme/components/VueMasteryLogoLink.vue index 75557c0f7..aa329d3b1 100644 --- a/packages/docs/.vitepress/theme/components/VueMasteryLogoLink.vue +++ b/packages/docs/.vitepress/theme/components/VueMasteryLogoLink.vue @@ -26,6 +26,7 @@ a { align-items: center; margin-top: 10px; margin-bottom: 10px; + text-decoration: none !important; } .description { @@ -38,10 +39,6 @@ a { transition: color 0.5s; } -a:hover { - text-decoration: none !important; -} - .description span { color: var(--vp-c-brand); } diff --git a/packages/docs/.vitepress/theme/components/VueSchoolLink.vue b/packages/docs/.vitepress/theme/components/VueSchoolLink.vue index e5211f552..d2e859a45 100644 --- a/packages/docs/.vitepress/theme/components/VueSchoolLink.vue +++ b/packages/docs/.vitepress/theme/components/VueSchoolLink.vue @@ -5,6 +5,7 @@ target="_blank" rel="sponsored noopener" :title="title" + class="no-icon" > {{ translations[site.lang] }} diff --git a/packages/docs/.vitepress/theme/components/sponsors.json b/packages/docs/.vitepress/theme/components/sponsors.json index e9c704b39..d4ef1030c 100644 --- a/packages/docs/.vitepress/theme/components/sponsors.json +++ b/packages/docs/.vitepress/theme/components/sponsors.json @@ -3,16 +3,16 @@ "gold": [], "silver": [ { - "href": "https://www.vuemastery.com/", "alt": "VueMastery", - "imgSrcLight": "https://posva-sponsors.pages.dev/logos/vuemastery-light.svg", - "imgSrcDark": "https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" + "href": "https://www.vuemastery.com/", + "imgSrcDark": "https://posva-sponsors.pages.dev/logos/vuemastery-dark.png", + "imgSrcLight": "https://posva-sponsors.pages.dev/logos/vuemastery-light.svg" }, { + "alt": "Prefect", "href": "https://www.prefect.io/", - "imgSrcLight": "https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg", "imgSrcDark": "https://posva-sponsors.pages.dev/logos/prefectlogo-dark.svg", - "alt": "Prefect" + "imgSrcLight": "https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg" } ], "bronze": [ @@ -29,16 +29,16 @@ "imgSrcLight": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" }, { + "alt": "Storyblok", "href": "https://storyblok.com", - "imgSrcLight": "https://posva-sponsors.pages.dev/logos/storyblok.png", "imgSrcDark": "https://posva-sponsors.pages.dev/logos/storyblok.png", - "alt": "Storyblok" + "imgSrcLight": "https://posva-sponsors.pages.dev/logos/storyblok.png" }, { - "href": "https://nuxtjs.org", - "imgSrcLight": "https://posva-sponsors.pages.dev/logos/nuxt-light.svg", - "imgSrcDark": "https://posva-sponsors.pages.dev/logos/nuxt-dark.svg", - "alt": "Nuxt Labs" + "alt": "Nuxt UI Pro Templates", + "href": "https://ui.nuxt.com/pro", + "imgSrcDark": "https://avatars.githubusercontent.com/u/81570812?v=4", + "imgSrcLight": "https://avatars.githubusercontent.com/u/81570812?v=4" } ] } diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts index 3a0eb6921..4fd5c4eb0 100644 --- a/packages/docs/.vitepress/theme/index.ts +++ b/packages/docs/.vitepress/theme/index.ts @@ -1,20 +1,28 @@ -import { Theme, useData } from 'vitepress' +import { h } from 'vue' +import { Theme } from 'vitepress' import DefaultTheme from 'vitepress/theme' -// import AsideSponsors from './components/AsideSponsors.vue' +import AsideSponsors from './components/AsideSponsors.vue' // import HomeSponsors from './components/HomeSponsors.vue' +import TranslationStatus from 'vitepress-translation-helper/ui/TranslationStatus.vue' import './styles/vars.css' import './styles/sponsors.css' import VueSchoolLink from './components/VueSchoolLink.vue' import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue' +import status from '../translation-status.json' + +const i18nLabels = { + zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 ${hash}。', +} const theme: Theme = { - ...DefaultTheme, - // Layout() { - // return h(DefaultTheme.Layout, null, { - // 'home-features-after': () => h(HomeSponsors), - // 'aside-ads-before': () => h(AsideSponsors), - // }) - // }, + extends: DefaultTheme, + Layout() { + return h(DefaultTheme.Layout, null, { + // 'home-features-after': () => h(HomeSponsors), + 'aside-ads-before': () => h(AsideSponsors), + 'doc-before': () => h(TranslationStatus, { status, i18nLabels }), + }) + }, enhanceApp({ app }) { app.component('VueSchoolLink', VueSchoolLink) diff --git a/packages/docs/.vitepress/theme/styles/vars.css b/packages/docs/.vitepress/theme/styles/vars.css index 6ead4e388..b68e478a6 100644 --- a/packages/docs/.vitepress/theme/styles/vars.css +++ b/packages/docs/.vitepress/theme/styles/vars.css @@ -1,22 +1,18 @@ :root { - --vp-code-block-bg: var(--vp-c-bg-alt); + --vp-c-brand-1: var(--vp-c-green-1); + --vp-c-brand-2: var(--vp-c-green-2); + --vp-c-brand-3: var(--vp-c-green-3); + --vp-c-brand-soft: var(--vp-c-green-soft); + --vp-code-color: #476582; } -/** - * Component: Home - * -------------------------------------------------------------------------- */ -:root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: linear-gradient( - 292deg, - var(--vp-c-brand-light) 50%, - var(--vp-c-brand-dark) - ); - /* It doesn't look good... */ - /* --vp-home-hero-image-background-image: linear-gradient( - 15deg, - var(--vp-c-brand-darker) 65%, - var(--vp-c-brand-dark) 30% +:root.dark { + --vp-code-color: #c9def1; + + --vp-home-hero-image-filter: blur(72px); + --vp-home-hero-image-background-image: linear-gradient( + 0deg, + var(--vp-c-brand-soft) 50%, + var(--vp-c-brand-soft) 50% ); - --vp-home-hero-image-filter: blur(40px); */ } diff --git a/packages/docs/.vitepress/translation-status.json b/packages/docs/.vitepress/translation-status.json new file mode 100644 index 000000000..ea46a9127 --- /dev/null +++ b/packages/docs/.vitepress/translation-status.json @@ -0,0 +1,6 @@ +{ + "zh": { + "hash": "35a9c1b", + "date": "2023-12-16" + } +} \ No newline at end of file diff --git a/packages/docs/api/enums/NavigationFailureType.md b/packages/docs/api/enums/NavigationFailureType.md index 92b9d6ab0..e7ccd2416 100644 --- a/packages/docs/api/enums/NavigationFailureType.md +++ b/packages/docs/api/enums/NavigationFailureType.md @@ -7,11 +7,11 @@ editLink: false # Enumeration: NavigationFailureType Enumeration with all possible types for navigation failures. Can be passed to -[isNavigationFailure](../index.md#isnavigationfailure) to check for specific failures. +[isNavigationFailure](../index.md#isNavigationFailure) to check for specific failures. -## Enumeration Members %{#Enumeration-Members}% +## Enumeration Members -### aborted %{#Enumeration-Members-aborted}% +### aborted • **aborted** = ``4`` @@ -20,7 +20,7 @@ guard returned `false` or called `next(false)` ___ -### cancelled %{#Enumeration-Members-cancelled}% +### cancelled • **cancelled** = ``8`` @@ -29,7 +29,7 @@ navigation finished started (not necessarily finished). ___ -### duplicated %{#Enumeration-Members-duplicated}% +### duplicated • **duplicated** = ``16`` diff --git a/packages/docs/api/index.md b/packages/docs/api/index.md index 3c315188c..1bfb5db8d 100644 --- a/packages/docs/api/index.md +++ b/packages/docs/api/index.md @@ -1,12 +1,16 @@ +--- +editLink: false +--- + API Documentation # API Documentation -## Enumerations %{#Enumerations}% +## Enumerations - [NavigationFailureType](enums/NavigationFailureType.md) -## Interfaces %{#Interfaces}% +## Interfaces - [HistoryState](interfaces/HistoryState.md) - [NavigationFailure](interfaces/NavigationFailure.md) @@ -20,41 +24,47 @@ API Documentation - [RouteLocationNormalizedLoaded](interfaces/RouteLocationNormalizedLoaded.md) - [RouteLocationOptions](interfaces/RouteLocationOptions.md) - [RouteMeta](interfaces/RouteMeta.md) +- [RouteRecordMultipleViews](interfaces/RouteRecordMultipleViews.md) +- [RouteRecordMultipleViewsWithChildren](interfaces/RouteRecordMultipleViewsWithChildren.md) - [RouteRecordNormalized](interfaces/RouteRecordNormalized.md) +- [RouteRecordRedirect](interfaces/RouteRecordRedirect.md) +- [RouteRecordSingleView](interfaces/RouteRecordSingleView.md) +- [RouteRecordSingleViewWithChildren](interfaces/RouteRecordSingleViewWithChildren.md) - [Router](interfaces/Router.md) - [RouterHistory](interfaces/RouterHistory.md) - [RouterLinkProps](interfaces/RouterLinkProps.md) - [RouterOptions](interfaces/RouterOptions.md) - [RouterScrollBehavior](interfaces/RouterScrollBehavior.md) - [RouterViewProps](interfaces/RouterViewProps.md) +- [\_RouteRecordBase](interfaces/RouteRecordBase.md) -## Type Aliases %{#Type-Aliases}% +## Type Aliases -### LocationQuery %{#Type-Aliases-LocationQuery}% +### LocationQuery -Ƭ **LocationQuery**: `Record`<`string`, `LocationQueryValue` \| `LocationQueryValue`[]\> +Ƭ **LocationQuery**: `Record`\<`string`, `LocationQueryValue` \| `LocationQueryValue`[]\> Normalized query object that appears in [RouteLocationNormalized](interfaces/RouteLocationNormalized.md) ___ -### LocationQueryRaw %{#Type-Aliases-LocationQueryRaw}% +### LocationQueryRaw -Ƭ **LocationQueryRaw**: `Record`<`string` \| `number`, `LocationQueryValueRaw` \| `LocationQueryValueRaw`[]\> +Ƭ **LocationQueryRaw**: `Record`\<`string` \| `number`, `LocationQueryValueRaw` \| `LocationQueryValueRaw`[]\> -Loose [LocationQuery](index.md#locationquery) object that can be passed to functions like -[push](interfaces/Router.md#push) and [replace](interfaces/Router.md#replace) or anywhere when creating a -[RouteLocationRaw](index.md#routelocationraw) +Loose [LocationQuery](index.md#LocationQuery) object that can be passed to functions like +[Router.push](interfaces/Router.md#push) and [Router.replace](interfaces/Router.md#replace) or anywhere when creating a +[RouteLocationRaw](index.md#RouteLocationRaw) ___ -### PathParserOptions %{#Type-Aliases-PathParserOptions}% +### PathParserOptions -Ƭ **PathParserOptions**: `Pick`<`_PathParserOptions`, ``"end"`` \| ``"sensitive"`` \| ``"strict"``\> +Ƭ **PathParserOptions**: `Pick`\<`_PathParserOptions`, ``"end"`` \| ``"sensitive"`` \| ``"strict"``\> ___ -### RouteComponent %{#Type-Aliases-RouteComponent}% +### RouteComponent Ƭ **RouteComponent**: `Component` \| `DefineComponent` @@ -62,7 +72,7 @@ Allowed Component in [RouteLocationMatched](interfaces/RouteLocationMatched.md) ___ -### RouteLocationRaw %{#Type-Aliases-RouteLocationRaw}% +### RouteLocationRaw Ƭ **RouteLocationRaw**: `string` \| `RouteLocationPathRaw` \| `RouteLocationNamedRaw` @@ -70,27 +80,27 @@ User-level route location ___ -### RouteParams %{#Type-Aliases-RouteParams}% +### RouteParams -Ƭ **RouteParams**: `Record`<`string`, `RouteParamValue` \| `RouteParamValue`[]\> +Ƭ **RouteParams**: `Record`\<`string`, `RouteParamValue` \| `RouteParamValue`[]\> ___ -### RouteParamsRaw %{#Type-Aliases-RouteParamsRaw}% +### RouteParamsRaw -Ƭ **RouteParamsRaw**: `Record`<`string`, `RouteParamValueRaw` \| `Exclude`<`RouteParamValueRaw`, ``null`` \| `undefined`\>[]\> +Ƭ **RouteParamsRaw**: `Record`\<`string`, `RouteParamValueRaw` \| `Exclude`\<`RouteParamValueRaw`, ``null`` \| `undefined`\>[]\> ___ -### RouteRecord %{#Type-Aliases-RouteRecord}% +### RouteRecord Ƭ **RouteRecord**: [`RouteRecordNormalized`](interfaces/RouteRecordNormalized.md) -Normalized version of a [route record](index.md#routerecord). +Normalized version of a [route record](index.md#RouteRecord). ___ -### RouteRecordName %{#Type-Aliases-RouteRecordName}% +### RouteRecordName Ƭ **RouteRecordName**: `string` \| `symbol` @@ -98,19 +108,19 @@ Possible values for a user-defined route record's name ___ -### RouteRecordRaw %{#Type-Aliases-RouteRecordRaw}% +### RouteRecordRaw -Ƭ **RouteRecordRaw**: `RouteRecordSingleView` \| `RouteRecordSingleViewWithChildren` \| `RouteRecordMultipleViews` \| `RouteRecordMultipleViewsWithChildren` \| `RouteRecordRedirect` +Ƭ **RouteRecordRaw**: [`RouteRecordSingleView`](interfaces/RouteRecordSingleView.md) \| [`RouteRecordSingleViewWithChildren`](interfaces/RouteRecordSingleViewWithChildren.md) \| [`RouteRecordMultipleViews`](interfaces/RouteRecordMultipleViews.md) \| [`RouteRecordMultipleViewsWithChildren`](interfaces/RouteRecordMultipleViewsWithChildren.md) \| [`RouteRecordRedirect`](interfaces/RouteRecordRedirect.md) ___ -### UseLinkOptions %{#Type-Aliases-UseLinkOptions}% +### UseLinkOptions -Ƭ **UseLinkOptions**: `VueUseOptions`<`RouterLinkOptions`\> +Ƭ **UseLinkOptions**: `VueUseOptions`\<`RouterLinkOptions`\> -## Variables %{#Variables}% +## Variables -### RouterLink %{#Variables-RouterLink}% +### RouterLink • `Const` **RouterLink**: `_RouterLinkI` @@ -118,19 +128,31 @@ Component to render a link that triggers a navigation on click. ___ -### RouterView %{#Variables-RouterView}% +### RouterView + +• `Const` **RouterView**: () => \{ `$props`: `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) ; `$slots`: \{ `default?`: (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\>[] } } -• `Const` **RouterView**: () => { `$props`: `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) ; `$slots`: { `default?`: (`__namedParameters`: { `Component`: `VNode`<`RendererNode`, `RendererElement`, { `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`<`RendererNode`, `RendererElement`, { `[key: string]`: `any`; }\>[] } } +Component to display the current route the user is at. -#### Type declaration %{#Variables-RouterView-Type-declaration}% +#### Type declaration -• **new RouterView**() +• **new RouterView**(): `Object` Component to display the current route the user is at. +##### Returns + +`Object` + +| Name | Type | +| :------ | :------ | +| `$props` | `AllowedComponentProps` & `ComponentCustomProps` & `VNodeProps` & [`RouterViewProps`](interfaces/RouterViewProps.md) | +| `$slots` | \{ `default?`: (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\>[] } | +| `$slots.default?` | (`__namedParameters`: \{ `Component`: `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\> ; `route`: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) }) => `VNode`\<`RendererNode`, `RendererElement`, \{ `[key: string]`: `any`; }\>[] | + ___ -### START\_LOCATION %{#Variables-START_LOCATION}% +### START\_LOCATION • `Const` **START\_LOCATION**: [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) @@ -149,22 +171,22 @@ router.beforeEach((to, from) => { }) ``` -## Functions %{#Functions}% +## Functions -### createMemoryHistory %{#Functions-createMemoryHistory}% +### createMemoryHistory ▸ **createMemoryHistory**(`base?`): [`RouterHistory`](interfaces/RouterHistory.md) Creates an in-memory based history. The main purpose of this history is to handle SSR. It starts in a special location that is nowhere. It's up to the user to replace that location with the starter location by either calling `router.push` or `router.replace`. -#### Parameters %{#Functions-createMemoryHistory-Parameters}% +#### Parameters | Name | Type | Default value | Description | | :------ | :------ | :------ | :------ | | `base` | `string` | `''` | Base applied to all urls, defaults to '/' | -#### Returns %{#Functions-createMemoryHistory-Returns}% +#### Returns [`RouterHistory`](interfaces/RouterHistory.md) @@ -172,31 +194,41 @@ a history object that can be passed to the router constructor ___ -### createRouter %{#Functions-createRouter}% +### createRouter ▸ **createRouter**(`options`): [`Router`](interfaces/Router.md) Creates a Router instance that can be used by a Vue app. -#### Parameters %{#Functions-createRouter-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `options` | [`RouterOptions`](interfaces/RouterOptions.md) | [RouterOptions](interfaces/RouterOptions.md) | -#### Returns %{#Functions-createRouter-Returns}% +#### Returns [`Router`](interfaces/Router.md) ___ -### createWebHashHistory %{#Functions-createWebHashHistory}% +### createWebHashHistory ▸ **createWebHashHistory**(`base?`): [`RouterHistory`](interfaces/RouterHistory.md) Creates a hash history. Useful for web applications with no host (e.g. `file://`) or when configuring a server to handle any URL is not possible. +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `base?` | `string` | optional base to provide. Defaults to `location.pathname + location.search` If there is a `` tag in the `head`, its value will be ignored in favor of this parameter **but note it affects all the history.pushState() calls**, meaning that if you use a `` tag, it's `href` value **has to match this parameter** (ignoring anything after the `#`). | + +#### Returns + +[`RouterHistory`](interfaces/RouterHistory.md) + **`Example`** ```js @@ -213,42 +245,43 @@ createWebHashHistory('/other-folder/') // gives a url of `https://example.com/ot createWebHashHistory('/iAmIgnored') // gives a url of `file:///usr/etc/folder/index.html#` ``` -#### Parameters %{#Functions-createWebHashHistory-Parameters}% - -| Name | Type | Description | -| :------ | :------ | :------ | -| `base?` | `string` | optional base to provide. Defaults to `location.pathname + location.search` If there is a `` tag in the `head`, its value will be ignored in favor of this parameter **but note it affects all the history.pushState() calls**, meaning that if you use a `` tag, it's `href` value **has to match this parameter** (ignoring anything after the `#`). | - -#### Returns %{#Functions-createWebHashHistory-Returns}% - -[`RouterHistory`](interfaces/RouterHistory.md) - ___ -### createWebHistory %{#Functions-createWebHistory}% +### createWebHistory ▸ **createWebHistory**(`base?`): [`RouterHistory`](interfaces/RouterHistory.md) Creates an HTML5 history. Most common history for single page applications. -#### Parameters %{#Functions-createWebHistory-Parameters}% +#### Parameters | Name | Type | | :------ | :------ | | `base?` | `string` | -#### Returns %{#Functions-createWebHistory-Returns}% +#### Returns [`RouterHistory`](interfaces/RouterHistory.md) ___ -### isNavigationFailure %{#Functions-isNavigationFailure}% +### isNavigationFailure ▸ **isNavigationFailure**(`error`, `type?`): error is NavigationRedirectError Check if an object is a [NavigationFailure](interfaces/NavigationFailure.md). +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `error` | `any` | possible [NavigationFailure](interfaces/NavigationFailure.md) | +| `type?` | `NAVIGATION_GUARD_REDIRECT` | optional types to check for | + +#### Returns + +error is NavigationRedirectError + **`Example`** ```js @@ -270,51 +303,40 @@ router.afterEach((to, from, failure) => { }) ``` -#### Parameters %{#Functions-isNavigationFailure-Parameters}% - -| Name | Type | Description | -| :------ | :------ | :------ | -| `error` | `any` | possible [NavigationFailure](interfaces/NavigationFailure.md) | -| `type?` | `NAVIGATION_GUARD_REDIRECT` | optional types to check for | - -#### Returns %{#Functions-isNavigationFailure-Returns}% - -error is NavigationRedirectError - ▸ **isNavigationFailure**(`error`, `type?`): error is NavigationFailure -#### Parameters %{#Functions-isNavigationFailure-Parameters_1}% +#### Parameters | Name | Type | | :------ | :------ | | `error` | `any` | | `type?` | `ErrorTypes` \| [`NavigationFailureType`](enums/NavigationFailureType.md) | -#### Returns %{#Functions-isNavigationFailure-Returns_1}% +#### Returns error is NavigationFailure ___ -### loadRouteLocation %{#Functions-loadRouteLocation}% +### loadRouteLocation -▸ **loadRouteLocation**(`route`): `Promise`<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\> +▸ **loadRouteLocation**(`route`): `Promise`\<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\> Ensures a route is loaded, so it can be passed as o prop to ``. -#### Parameters %{#Functions-loadRouteLocation-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `route` | [`RouteLocationNormalized`](interfaces/RouteLocationNormalized.md) | resolved route to load | -#### Returns %{#Functions-loadRouteLocation-Returns}% +#### Returns -`Promise`<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\> +`Promise`\<[`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md)\> ___ -### onBeforeRouteLeave %{#Functions-onBeforeRouteLeave}% +### onBeforeRouteLeave ▸ **onBeforeRouteLeave**(`leaveGuard`): `void` @@ -322,19 +344,19 @@ 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. -#### Parameters %{#Functions-onBeforeRouteLeave-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `leaveGuard` | [`NavigationGuard`](interfaces/NavigationGuard.md) | [NavigationGuard](interfaces/NavigationGuard.md) | -#### Returns %{#Functions-onBeforeRouteLeave-Returns}% +#### Returns `void` ___ -### onBeforeRouteUpdate %{#Functions-onBeforeRouteUpdate}% +### onBeforeRouteUpdate ▸ **onBeforeRouteUpdate**(`updateGuard`): `void` @@ -342,62 +364,62 @@ Add a navigation guard that triggers whenever the current location is about to be updated. Similar to beforeRouteUpdate but can be used in any component. The guard is removed when the component is unmounted. -#### Parameters %{#Functions-onBeforeRouteUpdate-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `updateGuard` | [`NavigationGuard`](interfaces/NavigationGuard.md) | [NavigationGuard](interfaces/NavigationGuard.md) | -#### Returns %{#Functions-onBeforeRouteUpdate-Returns}% +#### Returns `void` ___ -### useLink %{#Functions-useLink}% +### useLink ▸ **useLink**(`props`): `Object` -#### Parameters %{#Functions-useLink-Parameters}% +#### Parameters | Name | Type | | :------ | :------ | -| `props` | `VueUseOptions`<`RouterLinkOptions`\> | +| `props` | `VueUseOptions`\<`RouterLinkOptions`\> | -#### Returns %{#Functions-useLink-Returns}% +#### Returns `Object` | Name | Type | | :------ | :------ | -| `href` | `ComputedRef`<`string`\> | -| `isActive` | `ComputedRef`<`boolean`\> | -| `isExactActive` | `ComputedRef`<`boolean`\> | -| `navigate` | (`e`: `MouseEvent`) => `Promise`<`void` \| [`NavigationFailure`](interfaces/NavigationFailure.md)\> | -| `route` | `ComputedRef`<[`RouteLocation`](interfaces/RouteLocation.md) & { `href`: `string` }\> | +| `href` | `ComputedRef`\<`string`\> | +| `isActive` | `ComputedRef`\<`boolean`\> | +| `isExactActive` | `ComputedRef`\<`boolean`\> | +| `navigate` | (`e`: `MouseEvent`) => `Promise`\<`void` \| [`NavigationFailure`](interfaces/NavigationFailure.md)\> | +| `route` | `ComputedRef`\<[`RouteLocation`](interfaces/RouteLocation.md) & \{ `href`: `string` }\> | ___ -### useRoute %{#Functions-useRoute}% +### useRoute ▸ **useRoute**(): [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) Returns the current route location. Equivalent to using `$route` inside templates. -#### Returns %{#Functions-useRoute-Returns}% +#### Returns [`RouteLocationNormalizedLoaded`](interfaces/RouteLocationNormalizedLoaded.md) ___ -### useRouter %{#Functions-useRouter}% +### useRouter ▸ **useRouter**(): [`Router`](interfaces/Router.md) Returns the router instance. Equivalent to using `$router` inside templates. -#### Returns %{#Functions-useRouter-Returns}% +#### Returns [`Router`](interfaces/Router.md) diff --git a/packages/docs/api/interfaces/HistoryState.md b/packages/docs/api/interfaces/HistoryState.md index 63828f60e..ab0ffc718 100644 --- a/packages/docs/api/interfaces/HistoryState.md +++ b/packages/docs/api/interfaces/HistoryState.md @@ -8,6 +8,6 @@ editLink: false Allowed HTML history.state -## Indexable %{#Indexable}% +## Indexable ▪ [x: `number`]: `HistoryStateValue` diff --git a/packages/docs/api/interfaces/NavigationFailure.md b/packages/docs/api/interfaces/NavigationFailure.md index d49b8c4f5..c9e80423a 100644 --- a/packages/docs/api/interfaces/NavigationFailure.md +++ b/packages/docs/api/interfaces/NavigationFailure.md @@ -8,25 +8,25 @@ editLink: false Extended Error that contains extra information regarding a failed navigation. -## Hierarchy %{#Hierarchy}% +## Hierarchy - `Error` ↳ **`NavigationFailure`** -## Properties %{#Properties}% +## Properties -### cause %{#Properties-cause}% +### cause • `Optional` **cause**: `unknown` -#### Inherited from %{#Properties-cause-Inherited-from}% +#### Inherited from Error.cause ___ -### from %{#Properties-from}% +### from • **from**: [`RouteLocationNormalized`](RouteLocationNormalized.md) @@ -34,37 +34,37 @@ Route location we were navigating from ___ -### message %{#Properties-message}% +### message • **message**: `string` -#### Inherited from %{#Properties-message-Inherited-from}% +#### Inherited from Error.message ___ -### name %{#Properties-name}% +### name • **name**: `string` -#### Inherited from %{#Properties-name-Inherited-from}% +#### Inherited from Error.name ___ -### stack %{#Properties-stack}% +### stack • `Optional` **stack**: `string` -#### Inherited from %{#Properties-stack-Inherited-from}% +#### Inherited from Error.stack ___ -### to %{#Properties-to}% +### to • **to**: [`RouteLocationNormalized`](RouteLocationNormalized.md) @@ -72,7 +72,7 @@ Route location we were navigating to ___ -### type %{#Properties-type}% +### type • **type**: `NAVIGATION_ABORTED` \| `NAVIGATION_CANCELLED` \| `NAVIGATION_DUPLICATED` diff --git a/packages/docs/api/interfaces/NavigationGuard.md b/packages/docs/api/interfaces/NavigationGuard.md index 59f65bb1e..7a9a4865c 100644 --- a/packages/docs/api/interfaces/NavigationGuard.md +++ b/packages/docs/api/interfaces/NavigationGuard.md @@ -6,16 +6,16 @@ editLink: false # Interface: NavigationGuard -## Callable %{#Callable}% +Navigation guard. See [Navigation +Guards](/guide/advanced/navigation-guards.md). -### NavigationGuard %{#Callable-NavigationGuard}% +## Callable -▸ **NavigationGuard**(`to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\> +### NavigationGuard -Navigation guard. See [Navigation -Guards](/guide/advanced/navigation-guards.md). +▸ **NavigationGuard**(`to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\> -#### Parameters %{#Callable-NavigationGuard-Parameters}% +#### Parameters | Name | Type | | :------ | :------ | @@ -23,6 +23,6 @@ Guards](/guide/advanced/navigation-guards.md). | `from` | [`RouteLocationNormalized`](RouteLocationNormalized.md) | | `next` | [`NavigationGuardNext`](NavigationGuardNext.md) | -#### Returns %{#Callable-NavigationGuard-Returns}% +#### Returns -`NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\> +`NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\> diff --git a/packages/docs/api/interfaces/NavigationGuardNext.md b/packages/docs/api/interfaces/NavigationGuardNext.md index 278770b6d..b736b12d6 100644 --- a/packages/docs/api/interfaces/NavigationGuardNext.md +++ b/packages/docs/api/interfaces/NavigationGuardNext.md @@ -6,68 +6,68 @@ editLink: false # Interface: NavigationGuardNext -## Callable %{#Callable}% +## Callable -### NavigationGuardNext %{#Callable-NavigationGuardNext}% +### NavigationGuardNext ▸ **NavigationGuardNext**(): `void` -#### Returns %{#Callable-NavigationGuardNext-Returns}% +#### Returns `void` -### NavigationGuardNext %{#Callable-NavigationGuardNext_1}% +### NavigationGuardNext ▸ **NavigationGuardNext**(`error`): `void` -#### Parameters %{#Callable-NavigationGuardNext-Parameters}% +#### Parameters | Name | Type | | :------ | :------ | | `error` | `Error` | -#### Returns %{#Callable-NavigationGuardNext-Returns_1}% +#### Returns `void` -### NavigationGuardNext %{#Callable-NavigationGuardNext_2}% +### NavigationGuardNext ▸ **NavigationGuardNext**(`location`): `void` -#### Parameters %{#Callable-NavigationGuardNext-Parameters_1}% +#### Parameters | Name | Type | | :------ | :------ | -| `location` | [`RouteLocationRaw`](../index.md#routelocationraw) | +| `location` | [`RouteLocationRaw`](../index.md#RouteLocationRaw) | -#### Returns %{#Callable-NavigationGuardNext-Returns_2}% +#### Returns `void` -### NavigationGuardNext %{#Callable-NavigationGuardNext_3}% +### NavigationGuardNext ▸ **NavigationGuardNext**(`valid`): `void` -#### Parameters %{#Callable-NavigationGuardNext-Parameters_2}% +#### Parameters | Name | Type | | :------ | :------ | | `valid` | `undefined` \| `boolean` | -#### Returns %{#Callable-NavigationGuardNext-Returns_3}% +#### Returns `void` -### NavigationGuardNext %{#Callable-NavigationGuardNext_4}% +### NavigationGuardNext ▸ **NavigationGuardNext**(`cb`): `void` -#### Parameters %{#Callable-NavigationGuardNext-Parameters_3}% +#### Parameters | Name | Type | | :------ | :------ | | `cb` | `NavigationGuardNextCallback` | -#### Returns %{#Callable-NavigationGuardNext-Returns_4}% +#### Returns `void` diff --git a/packages/docs/api/interfaces/NavigationGuardWithThis.md b/packages/docs/api/interfaces/NavigationGuardWithThis.md index 2799f4d10..4b4fae7b0 100644 --- a/packages/docs/api/interfaces/NavigationGuardWithThis.md +++ b/packages/docs/api/interfaces/NavigationGuardWithThis.md @@ -4,24 +4,24 @@ editLink: false [API Documentation](../index.md) / NavigationGuardWithThis -# Interface: NavigationGuardWithThis +# Interface: NavigationGuardWithThis\ -## Type parameters %{#Type-parameters}% +Navigation guard. See [Navigation +Guards](/guide/advanced/navigation-guards.md). + +## Type parameters | Name | | :------ | | `T` | -## Callable %{#Callable}% +## Callable -### NavigationGuardWithThis %{#Callable-NavigationGuardWithThis}% +### NavigationGuardWithThis -▸ **NavigationGuardWithThis**(`this`, `to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\> - -Navigation guard. See [Navigation -Guards](/guide/advanced/navigation-guards.md). +▸ **NavigationGuardWithThis**(`this`, `to`, `from`, `next`): `NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\> -#### Parameters %{#Callable-NavigationGuardWithThis-Parameters}% +#### Parameters | Name | Type | | :------ | :------ | @@ -30,6 +30,6 @@ Guards](/guide/advanced/navigation-guards.md). | `from` | [`RouteLocationNormalized`](RouteLocationNormalized.md) | | `next` | [`NavigationGuardNext`](NavigationGuardNext.md) | -#### Returns %{#Callable-NavigationGuardWithThis-Returns}% +#### Returns -`NavigationGuardReturn` \| `Promise`<`NavigationGuardReturn`\> +`NavigationGuardReturn` \| `Promise`\<`NavigationGuardReturn`\> diff --git a/packages/docs/api/interfaces/NavigationHookAfter.md b/packages/docs/api/interfaces/NavigationHookAfter.md index 34fe56b2a..309d11311 100644 --- a/packages/docs/api/interfaces/NavigationHookAfter.md +++ b/packages/docs/api/interfaces/NavigationHookAfter.md @@ -6,13 +6,13 @@ editLink: false # Interface: NavigationHookAfter -## Callable %{#Callable}% +## Callable -### NavigationHookAfter %{#Callable-NavigationHookAfter}% +### NavigationHookAfter ▸ **NavigationHookAfter**(`to`, `from`, `failure?`): `any` -#### Parameters %{#Callable-NavigationHookAfter-Parameters}% +#### Parameters | Name | Type | | :------ | :------ | @@ -20,6 +20,6 @@ editLink: false | `from` | [`RouteLocationNormalized`](RouteLocationNormalized.md) | | `failure?` | `void` \| [`NavigationFailure`](NavigationFailure.md) | -#### Returns %{#Callable-NavigationHookAfter-Returns}% +#### Returns `any` diff --git a/packages/docs/api/interfaces/RouteLocation.md b/packages/docs/api/interfaces/RouteLocation.md index 9a23955a6..0aa1986ec 100644 --- a/packages/docs/api/interfaces/RouteLocation.md +++ b/packages/docs/api/interfaces/RouteLocation.md @@ -6,118 +6,118 @@ editLink: false # Interface: RouteLocation -[RouteLocationRaw](../index.md#routelocationraw) resolved using the matcher +[RouteLocationRaw](../index.md#RouteLocationRaw) resolved using the matcher -## Hierarchy %{#Hierarchy}% +## Hierarchy - `_RouteLocationBase` ↳ **`RouteLocation`** -## Properties %{#Properties}% +## Properties -### fullPath %{#Properties-fullPath}% +### fullPath • **fullPath**: `string` The whole location including the `search` and `hash`. This string is percentage encoded. -#### Inherited from %{#Properties-fullPath-Inherited-from}% +#### Inherited from \_RouteLocationBase.fullPath ___ -### hash %{#Properties-hash}% +### hash • **hash**: `string` Hash of the current location. If present, starts with a `#`. -#### Inherited from %{#Properties-hash-Inherited-from}% +#### Inherited from \_RouteLocationBase.hash ___ -### matched %{#Properties-matched}% +### matched • **matched**: [`RouteRecordNormalized`](RouteRecordNormalized.md)[] -Array of [RouteRecord](../index.md#routerecord) containing components as they were +Array of [RouteRecord](../index.md#RouteRecord) containing components as they were passed when adding records. It can also contain redirect records. This can't be used directly ___ -### meta %{#Properties-meta}% +### meta • **meta**: [`RouteMeta`](RouteMeta.md) Merged `meta` properties from all the matched route records. -#### Inherited from %{#Properties-meta-Inherited-from}% +#### Inherited from \_RouteLocationBase.meta ___ -### name %{#Properties-name}% +### name -• **name**: `undefined` \| ``null`` \| [`RouteRecordName`](../index.md#routerecordname) +• **name**: `undefined` \| ``null`` \| [`RouteRecordName`](../index.md#RouteRecordName) Name of the matched record -#### Inherited from %{#Properties-name-Inherited-from}% +#### Inherited from \_RouteLocationBase.name ___ -### params %{#Properties-params}% +### params -• **params**: [`RouteParams`](../index.md#routeparams) +• **params**: [`RouteParams`](../index.md#RouteParams) Object of decoded params extracted from the `path`. -#### Inherited from %{#Properties-params-Inherited-from}% +#### Inherited from \_RouteLocationBase.params ___ -### path %{#Properties-path}% +### path • **path**: `string` Percentage encoded pathname section of the URL. -#### Inherited from %{#Properties-path-Inherited-from}% +#### Inherited from \_RouteLocationBase.path ___ -### query %{#Properties-query}% +### query -• **query**: [`LocationQuery`](../index.md#locationquery) +• **query**: [`LocationQuery`](../index.md#LocationQuery) Object representation of the `search` property of the current location. -#### Inherited from %{#Properties-query-Inherited-from}% +#### Inherited from \_RouteLocationBase.query ___ -### redirectedFrom %{#Properties-redirectedFrom}% +### redirectedFrom • **redirectedFrom**: `undefined` \| [`RouteLocation`](RouteLocation.md) Contains the location we were initially trying to access before ending up on the current location. -#### Inherited from %{#Properties-redirectedFrom-Inherited-from}% +#### Inherited from \_RouteLocationBase.redirectedFrom diff --git a/packages/docs/api/interfaces/RouteLocationMatched.md b/packages/docs/api/interfaces/RouteLocationMatched.md index 82a324050..cf649dd73 100644 --- a/packages/docs/api/interfaces/RouteLocationMatched.md +++ b/packages/docs/api/interfaces/RouteLocationMatched.md @@ -6,68 +6,68 @@ editLink: false # Interface: RouteLocationMatched -Normalized version of a [route record](../index.md#routerecord). +Normalized version of a [route record](../index.md#RouteRecord). -## Hierarchy %{#Hierarchy}% +## Hierarchy - [`RouteRecordNormalized`](RouteRecordNormalized.md) ↳ **`RouteLocationMatched`** -## Properties %{#Properties}% +## Properties -### aliasOf %{#Properties-aliasOf}% +### aliasOf • **aliasOf**: `undefined` \| [`RouteRecordNormalized`](RouteRecordNormalized.md) Defines if this record is the alias of another one. This property is `undefined` if the record is the original one. -#### Inherited from %{#Properties-aliasOf-Inherited-from}% +#### Inherited from -[RouteRecordNormalized](RouteRecordNormalized.md).[aliasOf](RouteRecordNormalized.md#aliasof) +[RouteRecordNormalized](RouteRecordNormalized.md).[aliasOf](RouteRecordNormalized.md#aliasOf) ___ -### beforeEnter %{#Properties-beforeEnter}% +### beforeEnter -• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\>[] +• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] Registered beforeEnter guards -#### Inherited from %{#Properties-beforeEnter-Inherited-from}% +#### Inherited from -[RouteRecordNormalized](RouteRecordNormalized.md).[beforeEnter](RouteRecordNormalized.md#beforeenter) +[RouteRecordNormalized](RouteRecordNormalized.md).[beforeEnter](RouteRecordNormalized.md#beforeEnter) ___ -### children %{#Properties-children}% +### children -• **children**: [`RouteRecordRaw`](../index.md#routerecordraw)[] +• **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[] Nested route records. -#### Inherited from %{#Properties-children-Inherited-from}% +#### Inherited from [RouteRecordNormalized](RouteRecordNormalized.md).[children](RouteRecordNormalized.md#children) ___ -### components %{#Properties-components}% +### components -• **components**: `undefined` \| ``null`` \| `Record`<`string`, [`RouteComponent`](../index.md#routecomponent)\> +• **components**: `undefined` \| ``null`` \| `Record`\<`string`, [`RouteComponent`](../index.md#RouteComponent)\> -{@inheritDoc RouteRecordMultipleViews.components} +Components to display when the URL matches this route. Allow using named views. -#### Overrides %{#Properties-components-Overrides}% +#### Overrides [RouteRecordNormalized](RouteRecordNormalized.md).[components](RouteRecordNormalized.md#components) ___ -### instances %{#Properties-instances}% +### instances -• **instances**: `Record`<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`<{}, {}, {}, {}, {}, {}, {}, {}, ``false``, `ComponentOptionsBase`<`any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, {}, {}, `string`, {}\>, {}, {}\>\> +• **instances**: `Record`\<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`\> Mounted route component instances Having the instances on the record mean beforeRouteUpdate and @@ -77,66 +77,71 @@ view, basically duplicating the content on the page, which shouldn't happen in practice. It will work if multiple apps are rendering different named views. -#### Inherited from %{#Properties-instances-Inherited-from}% +#### Inherited from [RouteRecordNormalized](RouteRecordNormalized.md).[instances](RouteRecordNormalized.md#instances) ___ -### meta %{#Properties-meta}% +### meta • **meta**: [`RouteMeta`](RouteMeta.md) -{@inheritDoc _RouteRecordBase.meta} +Arbitrary data attached to the record. -#### Inherited from %{#Properties-meta-Inherited-from}% +#### Inherited from [RouteRecordNormalized](RouteRecordNormalized.md).[meta](RouteRecordNormalized.md#meta) ___ -### name %{#Properties-name}% +### name -• **name**: `undefined` \| [`RouteRecordName`](../index.md#routerecordname) +• **name**: `undefined` \| [`RouteRecordName`](../index.md#RouteRecordName) -{@inheritDoc _RouteRecordBase.name} +Name for the route record. Must be unique. -#### Inherited from %{#Properties-name-Inherited-from}% +#### Inherited from [RouteRecordNormalized](RouteRecordNormalized.md).[name](RouteRecordNormalized.md#name) ___ -### path %{#Properties-path}% +### path • **path**: `string` -{@inheritDoc _RouteRecordBase.path} +Path of the record. Should start with `/` unless the record is the child of +another record. -#### Inherited from %{#Properties-path-Inherited-from}% +#### Inherited from [RouteRecordNormalized](RouteRecordNormalized.md).[path](RouteRecordNormalized.md#path) ___ -### props %{#Properties-props}% +### props -• **props**: `Record`<`string`, `_RouteRecordProps`\> +• **props**: `Record`\<`string`, `_RouteRecordProps`\> -{@inheritDoc RouteRecordMultipleViews.props} +Allow passing down params as props to the component rendered by +`router-view`. Should be an object with the same keys as `components` or a +boolean to be applied to every component. -#### Inherited from %{#Properties-props-Inherited-from}% +#### Inherited from [RouteRecordNormalized](RouteRecordNormalized.md).[props](RouteRecordNormalized.md#props) ___ -### redirect %{#Properties-redirect}% +### redirect • **redirect**: `undefined` \| `RouteRecordRedirectOption` -{@inheritDoc _RouteRecordBase.redirect} +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. -#### Inherited from %{#Properties-redirect-Inherited-from}% +#### Inherited from [RouteRecordNormalized](RouteRecordNormalized.md).[redirect](RouteRecordNormalized.md#redirect) diff --git a/packages/docs/api/interfaces/RouteLocationNormalized.md b/packages/docs/api/interfaces/RouteLocationNormalized.md index 2e49471da..43949a3bd 100644 --- a/packages/docs/api/interfaces/RouteLocationNormalized.md +++ b/packages/docs/api/interfaces/RouteLocationNormalized.md @@ -7,42 +7,42 @@ editLink: false # Interface: RouteLocationNormalized Similar to [RouteLocation](RouteLocation.md) but its -[matched](RouteLocationNormalized.md#matched) cannot contain redirect records +[RouteLocationNormalized.matched](RouteLocationNormalized.md#matched) cannot contain redirect records -## Hierarchy %{#Hierarchy}% +## Hierarchy - `_RouteLocationBase` ↳ **`RouteLocationNormalized`** -## Properties %{#Properties}% +## Properties -### fullPath %{#Properties-fullPath}% +### fullPath • **fullPath**: `string` The whole location including the `search` and `hash`. This string is percentage encoded. -#### Inherited from %{#Properties-fullPath-Inherited-from}% +#### Inherited from \_RouteLocationBase.fullPath ___ -### hash %{#Properties-hash}% +### hash • **hash**: `string` Hash of the current location. If present, starts with a `#`. -#### Inherited from %{#Properties-hash-Inherited-from}% +#### Inherited from \_RouteLocationBase.hash ___ -### matched %{#Properties-matched}% +### matched • **matched**: [`RouteRecordNormalized`](RouteRecordNormalized.md)[] @@ -50,73 +50,73 @@ Array of [RouteRecordNormalized](RouteRecordNormalized.md) ___ -### meta %{#Properties-meta}% +### meta • **meta**: [`RouteMeta`](RouteMeta.md) Merged `meta` properties from all the matched route records. -#### Inherited from %{#Properties-meta-Inherited-from}% +#### Inherited from \_RouteLocationBase.meta ___ -### name %{#Properties-name}% +### name -• **name**: `undefined` \| ``null`` \| [`RouteRecordName`](../index.md#routerecordname) +• **name**: `undefined` \| ``null`` \| [`RouteRecordName`](../index.md#RouteRecordName) Name of the matched record -#### Inherited from %{#Properties-name-Inherited-from}% +#### Inherited from \_RouteLocationBase.name ___ -### params %{#Properties-params}% +### params -• **params**: [`RouteParams`](../index.md#routeparams) +• **params**: [`RouteParams`](../index.md#RouteParams) Object of decoded params extracted from the `path`. -#### Inherited from %{#Properties-params-Inherited-from}% +#### Inherited from \_RouteLocationBase.params ___ -### path %{#Properties-path}% +### path • **path**: `string` Percentage encoded pathname section of the URL. -#### Inherited from %{#Properties-path-Inherited-from}% +#### Inherited from \_RouteLocationBase.path ___ -### query %{#Properties-query}% +### query -• **query**: [`LocationQuery`](../index.md#locationquery) +• **query**: [`LocationQuery`](../index.md#LocationQuery) Object representation of the `search` property of the current location. -#### Inherited from %{#Properties-query-Inherited-from}% +#### Inherited from \_RouteLocationBase.query ___ -### redirectedFrom %{#Properties-redirectedFrom}% +### redirectedFrom • **redirectedFrom**: `undefined` \| [`RouteLocation`](RouteLocation.md) Contains the location we were initially trying to access before ending up on the current location. -#### Inherited from %{#Properties-redirectedFrom-Inherited-from}% +#### Inherited from \_RouteLocationBase.redirectedFrom diff --git a/packages/docs/api/interfaces/RouteLocationNormalizedLoaded.md b/packages/docs/api/interfaces/RouteLocationNormalizedLoaded.md index 0f3b828af..79b028385 100644 --- a/packages/docs/api/interfaces/RouteLocationNormalizedLoaded.md +++ b/packages/docs/api/interfaces/RouteLocationNormalizedLoaded.md @@ -6,42 +6,42 @@ editLink: false # Interface: RouteLocationNormalizedLoaded -[RouteLocationRaw](../index.md#routelocationraw) with +[RouteLocationRaw](../index.md#RouteLocationRaw) with -## Hierarchy %{#Hierarchy}% +## Hierarchy - `_RouteLocationBase` ↳ **`RouteLocationNormalizedLoaded`** -## Properties %{#Properties}% +## Properties -### fullPath %{#Properties-fullPath}% +### fullPath • **fullPath**: `string` The whole location including the `search` and `hash`. This string is percentage encoded. -#### Inherited from %{#Properties-fullPath-Inherited-from}% +#### Inherited from \_RouteLocationBase.fullPath ___ -### hash %{#Properties-hash}% +### hash • **hash**: `string` Hash of the current location. If present, starts with a `#`. -#### Inherited from %{#Properties-hash-Inherited-from}% +#### Inherited from \_RouteLocationBase.hash ___ -### matched %{#Properties-matched}% +### matched • **matched**: [`RouteLocationMatched`](RouteLocationMatched.md)[] @@ -52,73 +52,73 @@ cannot contain redirect records either ___ -### meta %{#Properties-meta}% +### meta • **meta**: [`RouteMeta`](RouteMeta.md) Merged `meta` properties from all the matched route records. -#### Inherited from %{#Properties-meta-Inherited-from}% +#### Inherited from \_RouteLocationBase.meta ___ -### name %{#Properties-name}% +### name -• **name**: `undefined` \| ``null`` \| [`RouteRecordName`](../index.md#routerecordname) +• **name**: `undefined` \| ``null`` \| [`RouteRecordName`](../index.md#RouteRecordName) Name of the matched record -#### Inherited from %{#Properties-name-Inherited-from}% +#### Inherited from \_RouteLocationBase.name ___ -### params %{#Properties-params}% +### params -• **params**: [`RouteParams`](../index.md#routeparams) +• **params**: [`RouteParams`](../index.md#RouteParams) Object of decoded params extracted from the `path`. -#### Inherited from %{#Properties-params-Inherited-from}% +#### Inherited from \_RouteLocationBase.params ___ -### path %{#Properties-path}% +### path • **path**: `string` Percentage encoded pathname section of the URL. -#### Inherited from %{#Properties-path-Inherited-from}% +#### Inherited from \_RouteLocationBase.path ___ -### query %{#Properties-query}% +### query -• **query**: [`LocationQuery`](../index.md#locationquery) +• **query**: [`LocationQuery`](../index.md#LocationQuery) Object representation of the `search` property of the current location. -#### Inherited from %{#Properties-query-Inherited-from}% +#### Inherited from \_RouteLocationBase.query ___ -### redirectedFrom %{#Properties-redirectedFrom}% +### redirectedFrom • **redirectedFrom**: `undefined` \| [`RouteLocation`](RouteLocation.md) Contains the location we were initially trying to access before ending up on the current location. -#### Inherited from %{#Properties-redirectedFrom-Inherited-from}% +#### Inherited from \_RouteLocationBase.redirectedFrom diff --git a/packages/docs/api/interfaces/RouteLocationOptions.md b/packages/docs/api/interfaces/RouteLocationOptions.md index 488dc5768..59ece3525 100644 --- a/packages/docs/api/interfaces/RouteLocationOptions.md +++ b/packages/docs/api/interfaces/RouteLocationOptions.md @@ -8,9 +8,9 @@ editLink: false Common options for all navigation methods. -## Properties %{#Properties}% +## Properties -### force %{#Properties-force}% +### force • `Optional` **force**: `boolean` @@ -20,7 +20,7 @@ is passed. ___ -### replace %{#Properties-replace}% +### replace • `Optional` **replace**: `boolean` @@ -28,7 +28,7 @@ Replace the entry in the history instead of pushing a new entry ___ -### state %{#Properties-state}% +### state • `Optional` **state**: [`HistoryState`](HistoryState.md) diff --git a/packages/docs/api/interfaces/RouteMeta.md b/packages/docs/api/interfaces/RouteMeta.md index 344ab4abc..5e6007b10 100644 --- a/packages/docs/api/interfaces/RouteMeta.md +++ b/packages/docs/api/interfaces/RouteMeta.md @@ -21,8 +21,8 @@ declare module 'vue-router' { } ``` -## Hierarchy %{#Hierarchy}% +## Hierarchy -- `Record`<`string` \| `number` \| `symbol`, `unknown`\> +- `Record`\<`string` \| `number` \| `symbol`, `unknown`\> ↳ **`RouteMeta`** diff --git a/packages/docs/api/interfaces/RouteRecordBase.md b/packages/docs/api/interfaces/RouteRecordBase.md new file mode 100644 index 000000000..f64004047 --- /dev/null +++ b/packages/docs/api/interfaces/RouteRecordBase.md @@ -0,0 +1,149 @@ +--- +editLink: false +--- + +[API Documentation](../index.md) / \_RouteRecordBase + +# Interface: \_RouteRecordBase + +Internal type for common properties among all kind of [RouteRecordRaw](../index.md#RouteRecordRaw). + +## Hierarchy + +- [`PathParserOptions`](../index.md#PathParserOptions) + + ↳ **`_RouteRecordBase`** + + ↳↳ [`RouteRecordSingleView`](RouteRecordSingleView.md) + + ↳↳ [`RouteRecordSingleViewWithChildren`](RouteRecordSingleViewWithChildren.md) + + ↳↳ [`RouteRecordMultipleViews`](RouteRecordMultipleViews.md) + + ↳↳ [`RouteRecordMultipleViewsWithChildren`](RouteRecordMultipleViewsWithChildren.md) + + ↳↳ [`RouteRecordRedirect`](RouteRecordRedirect.md) + +## Properties + +### alias + +• `Optional` **alias**: `string` \| `string`[] + +Aliases for the record. Allows defining extra paths that will behave like a +copy of the record. Allows having paths shorthands like `/users/:id` and +`/u/:id`. All `alias` and `path` values must share the same params. + +___ + +### beforeEnter + +• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] + +Before Enter guard specific to this record. Note `beforeEnter` has no +effect if the record has a `redirect` property. + +___ + +### children + +• `Optional` **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[] + +Array of nested routes. + +___ + +### end + +• `Optional` **end**: `boolean` + +Should the RegExp match until the end by appending a `$` to it. + +**`Default Value`** + +`true` + +#### Inherited from + +PathParserOptions.end + +___ + +### meta + +• `Optional` **meta**: [`RouteMeta`](RouteMeta.md) + +Arbitrary data attached to the record. + +___ + +### name + +• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName) + +Name for the route record. Must be unique. + +___ + +### path + +• **path**: `string` + +Path of the record. Should start with `/` unless the record is the child of +another record. + +**`Example`** + +```ts +`/users/:id` matches `/users/1` as well as `/users/posva`. +``` + +___ + +### props + +• `Optional` **props**: `_RouteRecordProps` \| `Record`\<`string`, `_RouteRecordProps`\> + +Allow passing down params as props to the component rendered by `router-view`. + +___ + +### redirect + +• `Optional` **redirect**: `RouteRecordRedirectOption` + +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. + +___ + +### sensitive + +• `Optional` **sensitive**: `boolean` + +Makes the RegExp case-sensitive. + +**`Default Value`** + +`false` + +#### Inherited from + +PathParserOptions.sensitive + +___ + +### strict + +• `Optional` **strict**: `boolean` + +Whether to disallow a trailing slash or not. + +**`Default Value`** + +`false` + +#### Inherited from + +PathParserOptions.strict diff --git a/packages/docs/api/interfaces/RouteRecordMultipleViews.md b/packages/docs/api/interfaces/RouteRecordMultipleViews.md new file mode 100644 index 000000000..2f5007aa5 --- /dev/null +++ b/packages/docs/api/interfaces/RouteRecordMultipleViews.md @@ -0,0 +1,187 @@ +--- +editLink: false +--- + +[API Documentation](../index.md) / RouteRecordMultipleViews + +# Interface: RouteRecordMultipleViews + +Route Record defining multiple named components with the `components` option. + +## Hierarchy + +- [`_RouteRecordBase`](RouteRecordBase.md) + + ↳ **`RouteRecordMultipleViews`** + +## Properties + +### alias + +• `Optional` **alias**: `string` \| `string`[] + +Aliases for the record. Allows defining extra paths that will behave like a +copy of the record. Allows having paths shorthands like `/users/:id` and +`/u/:id`. All `alias` and `path` values must share the same params. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias) + +___ + +### beforeEnter + +• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] + +Before Enter guard specific to this record. Note `beforeEnter` has no +effect if the record has a `redirect` property. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter) + +___ + +### children + +• `Optional` **children**: `undefined` + +Array of nested routes. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children) + +___ + +### component + +• `Optional` **component**: `undefined` + +___ + +### components + +• **components**: `Record`\<`string`, `RawRouteComponent`\> + +Components to display when the URL matches this route. Allow using named views. + +___ + +### end + +• `Optional` **end**: `boolean` + +Should the RegExp match until the end by appending a `$` to it. + +**`Default Value`** + +`true` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end) + +___ + +### meta + +• `Optional` **meta**: [`RouteMeta`](RouteMeta.md) + +Arbitrary data attached to the record. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta) + +___ + +### name + +• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName) + +Name for the route record. Must be unique. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name) + +___ + +### path + +• **path**: `string` + +Path of the record. Should start with `/` unless the record is the child of +another record. + +**`Example`** + +```ts +`/users/:id` matches `/users/1` as well as `/users/posva`. +``` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path) + +___ + +### props + +• `Optional` **props**: `boolean` \| `Record`\<`string`, `_RouteRecordProps`\> + +Allow passing down params as props to the component rendered by +`router-view`. Should be an object with the same keys as `components` or a +boolean to be applied to every component. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props) + +___ + +### redirect + +• `Optional` **redirect**: `undefined` + +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect) + +___ + +### sensitive + +• `Optional` **sensitive**: `boolean` + +Makes the RegExp case-sensitive. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive) + +___ + +### strict + +• `Optional` **strict**: `boolean` + +Whether to disallow a trailing slash or not. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict) diff --git a/packages/docs/api/interfaces/RouteRecordMultipleViewsWithChildren.md b/packages/docs/api/interfaces/RouteRecordMultipleViewsWithChildren.md new file mode 100644 index 000000000..ddec0ecaf --- /dev/null +++ b/packages/docs/api/interfaces/RouteRecordMultipleViewsWithChildren.md @@ -0,0 +1,187 @@ +--- +editLink: false +--- + +[API Documentation](../index.md) / RouteRecordMultipleViewsWithChildren + +# Interface: RouteRecordMultipleViewsWithChildren + +Route Record defining multiple named components with the `components` option and children. + +## Hierarchy + +- [`_RouteRecordBase`](RouteRecordBase.md) + + ↳ **`RouteRecordMultipleViewsWithChildren`** + +## Properties + +### alias + +• `Optional` **alias**: `string` \| `string`[] + +Aliases for the record. Allows defining extra paths that will behave like a +copy of the record. Allows having paths shorthands like `/users/:id` and +`/u/:id`. All `alias` and `path` values must share the same params. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias) + +___ + +### beforeEnter + +• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] + +Before Enter guard specific to this record. Note `beforeEnter` has no +effect if the record has a `redirect` property. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter) + +___ + +### children + +• **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[] + +Array of nested routes. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children) + +___ + +### component + +• `Optional` **component**: `undefined` + +___ + +### components + +• `Optional` **components**: ``null`` \| `Record`\<`string`, `RawRouteComponent`\> + +Components to display when the URL matches this route. Allow using named views. + +___ + +### end + +• `Optional` **end**: `boolean` + +Should the RegExp match until the end by appending a `$` to it. + +**`Default Value`** + +`true` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end) + +___ + +### meta + +• `Optional` **meta**: [`RouteMeta`](RouteMeta.md) + +Arbitrary data attached to the record. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta) + +___ + +### name + +• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName) + +Name for the route record. Must be unique. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name) + +___ + +### path + +• **path**: `string` + +Path of the record. Should start with `/` unless the record is the child of +another record. + +**`Example`** + +```ts +`/users/:id` matches `/users/1` as well as `/users/posva`. +``` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path) + +___ + +### props + +• `Optional` **props**: `boolean` \| `Record`\<`string`, `_RouteRecordProps`\> + +Allow passing down params as props to the component rendered by +`router-view`. Should be an object with the same keys as `components` or a +boolean to be applied to every component. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props) + +___ + +### redirect + +• `Optional` **redirect**: `RouteRecordRedirectOption` + +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect) + +___ + +### sensitive + +• `Optional` **sensitive**: `boolean` + +Makes the RegExp case-sensitive. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive) + +___ + +### strict + +• `Optional` **strict**: `boolean` + +Whether to disallow a trailing slash or not. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict) diff --git a/packages/docs/api/interfaces/RouteRecordNormalized.md b/packages/docs/api/interfaces/RouteRecordNormalized.md index 0e5836863..0107112b6 100644 --- a/packages/docs/api/interfaces/RouteRecordNormalized.md +++ b/packages/docs/api/interfaces/RouteRecordNormalized.md @@ -6,17 +6,17 @@ editLink: false # Interface: RouteRecordNormalized -Normalized version of a [route record](../index.md#routerecord). +Normalized version of a [route record](../index.md#RouteRecord). -## Hierarchy %{#Hierarchy}% +## Hierarchy - **`RouteRecordNormalized`** ↳ [`RouteLocationMatched`](RouteLocationMatched.md) -## Properties %{#Properties}% +## Properties -### aliasOf %{#Properties-aliasOf}% +### aliasOf • **aliasOf**: `undefined` \| [`RouteRecordNormalized`](RouteRecordNormalized.md) @@ -25,33 +25,33 @@ Defines if this record is the alias of another one. This property is ___ -### beforeEnter %{#Properties-beforeEnter}% +### beforeEnter -• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\>[] +• **beforeEnter**: `undefined` \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] Registered beforeEnter guards ___ -### children %{#Properties-children}% +### children -• **children**: [`RouteRecordRaw`](../index.md#routerecordraw)[] +• **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[] Nested route records. ___ -### components %{#Properties-components}% +### components -• **components**: `undefined` \| ``null`` \| `Record`<`string`, `RawRouteComponent`\> +• **components**: `undefined` \| ``null`` \| `Record`\<`string`, `RawRouteComponent`\> -{@inheritDoc RouteRecordMultipleViews.components} +Components to display when the URL matches this route. Allow using named views. ___ -### instances %{#Properties-instances}% +### instances -• **instances**: `Record`<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`<{}, {}, {}, {}, {}, {}, {}, {}, ``false``, `ComponentOptionsBase`<`any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, `any`, {}, {}, `string`, {}\>, {}, {}\>\> +• **instances**: `Record`\<`string`, `undefined` \| ``null`` \| `ComponentPublicInstance`\> Mounted route component instances Having the instances on the record mean beforeRouteUpdate and @@ -63,40 +63,45 @@ views. ___ -### meta %{#Properties-meta}% +### meta • **meta**: [`RouteMeta`](RouteMeta.md) -{@inheritDoc _RouteRecordBase.meta} +Arbitrary data attached to the record. ___ -### name %{#Properties-name}% +### name -• **name**: `undefined` \| [`RouteRecordName`](../index.md#routerecordname) +• **name**: `undefined` \| [`RouteRecordName`](../index.md#RouteRecordName) -{@inheritDoc _RouteRecordBase.name} +Name for the route record. Must be unique. ___ -### path %{#Properties-path}% +### path • **path**: `string` -{@inheritDoc _RouteRecordBase.path} +Path of the record. Should start with `/` unless the record is the child of +another record. ___ -### props %{#Properties-props}% +### props -• **props**: `Record`<`string`, `_RouteRecordProps`\> +• **props**: `Record`\<`string`, `_RouteRecordProps`\> -{@inheritDoc RouteRecordMultipleViews.props} +Allow passing down params as props to the component rendered by +`router-view`. Should be an object with the same keys as `components` or a +boolean to be applied to every component. ___ -### redirect %{#Properties-redirect}% +### redirect • **redirect**: `undefined` \| `RouteRecordRedirectOption` -{@inheritDoc _RouteRecordBase.redirect} +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. diff --git a/packages/docs/api/interfaces/RouteRecordRedirect.md b/packages/docs/api/interfaces/RouteRecordRedirect.md new file mode 100644 index 000000000..2f471ddd3 --- /dev/null +++ b/packages/docs/api/interfaces/RouteRecordRedirect.md @@ -0,0 +1,184 @@ +--- +editLink: false +--- + +[API Documentation](../index.md) / RouteRecordRedirect + +# Interface: RouteRecordRedirect + +Route Record that defines a redirect. Cannot have `component` or `components` +as it is never rendered. + +## Hierarchy + +- [`_RouteRecordBase`](RouteRecordBase.md) + + ↳ **`RouteRecordRedirect`** + +## Properties + +### alias + +• `Optional` **alias**: `string` \| `string`[] + +Aliases for the record. Allows defining extra paths that will behave like a +copy of the record. Allows having paths shorthands like `/users/:id` and +`/u/:id`. All `alias` and `path` values must share the same params. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias) + +___ + +### beforeEnter + +• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] + +Before Enter guard specific to this record. Note `beforeEnter` has no +effect if the record has a `redirect` property. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter) + +___ + +### children + +• `Optional` **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[] + +Array of nested routes. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children) + +___ + +### component + +• `Optional` **component**: `undefined` + +___ + +### components + +• `Optional` **components**: `undefined` + +___ + +### end + +• `Optional` **end**: `boolean` + +Should the RegExp match until the end by appending a `$` to it. + +**`Default Value`** + +`true` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end) + +___ + +### meta + +• `Optional` **meta**: [`RouteMeta`](RouteMeta.md) + +Arbitrary data attached to the record. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta) + +___ + +### name + +• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName) + +Name for the route record. Must be unique. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name) + +___ + +### path + +• **path**: `string` + +Path of the record. Should start with `/` unless the record is the child of +another record. + +**`Example`** + +```ts +`/users/:id` matches `/users/1` as well as `/users/posva`. +``` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path) + +___ + +### props + +• `Optional` **props**: `undefined` + +Allow passing down params as props to the component rendered by `router-view`. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props) + +___ + +### redirect + +• **redirect**: `RouteRecordRedirectOption` + +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect) + +___ + +### sensitive + +• `Optional` **sensitive**: `boolean` + +Makes the RegExp case-sensitive. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive) + +___ + +### strict + +• `Optional` **strict**: `boolean` + +Whether to disallow a trailing slash or not. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict) diff --git a/packages/docs/api/interfaces/RouteRecordSingleView.md b/packages/docs/api/interfaces/RouteRecordSingleView.md new file mode 100644 index 000000000..9a64196dc --- /dev/null +++ b/packages/docs/api/interfaces/RouteRecordSingleView.md @@ -0,0 +1,185 @@ +--- +editLink: false +--- + +[API Documentation](../index.md) / RouteRecordSingleView + +# Interface: RouteRecordSingleView + +Route Record defining one single component with the `component` option. + +## Hierarchy + +- [`_RouteRecordBase`](RouteRecordBase.md) + + ↳ **`RouteRecordSingleView`** + +## Properties + +### alias + +• `Optional` **alias**: `string` \| `string`[] + +Aliases for the record. Allows defining extra paths that will behave like a +copy of the record. Allows having paths shorthands like `/users/:id` and +`/u/:id`. All `alias` and `path` values must share the same params. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias) + +___ + +### beforeEnter + +• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] + +Before Enter guard specific to this record. Note `beforeEnter` has no +effect if the record has a `redirect` property. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter) + +___ + +### children + +• `Optional` **children**: `undefined` + +Array of nested routes. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children) + +___ + +### component + +• **component**: `RawRouteComponent` + +Component to display when the URL matches this route. + +___ + +### components + +• `Optional` **components**: `undefined` + +___ + +### end + +• `Optional` **end**: `boolean` + +Should the RegExp match until the end by appending a `$` to it. + +**`Default Value`** + +`true` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end) + +___ + +### meta + +• `Optional` **meta**: [`RouteMeta`](RouteMeta.md) + +Arbitrary data attached to the record. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta) + +___ + +### name + +• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName) + +Name for the route record. Must be unique. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name) + +___ + +### path + +• **path**: `string` + +Path of the record. Should start with `/` unless the record is the child of +another record. + +**`Example`** + +```ts +`/users/:id` matches `/users/1` as well as `/users/posva`. +``` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path) + +___ + +### props + +• `Optional` **props**: `_RouteRecordProps` + +Allow passing down params as props to the component rendered by `router-view`. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props) + +___ + +### redirect + +• `Optional` **redirect**: `undefined` + +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect) + +___ + +### sensitive + +• `Optional` **sensitive**: `boolean` + +Makes the RegExp case-sensitive. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive) + +___ + +### strict + +• `Optional` **strict**: `boolean` + +Whether to disallow a trailing slash or not. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict) diff --git a/packages/docs/api/interfaces/RouteRecordSingleViewWithChildren.md b/packages/docs/api/interfaces/RouteRecordSingleViewWithChildren.md new file mode 100644 index 000000000..2216c0d92 --- /dev/null +++ b/packages/docs/api/interfaces/RouteRecordSingleViewWithChildren.md @@ -0,0 +1,185 @@ +--- +editLink: false +--- + +[API Documentation](../index.md) / RouteRecordSingleViewWithChildren + +# Interface: RouteRecordSingleViewWithChildren + +Route Record defining one single component with a nested view. + +## Hierarchy + +- [`_RouteRecordBase`](RouteRecordBase.md) + + ↳ **`RouteRecordSingleViewWithChildren`** + +## Properties + +### alias + +• `Optional` **alias**: `string` \| `string`[] + +Aliases for the record. Allows defining extra paths that will behave like a +copy of the record. Allows having paths shorthands like `/users/:id` and +`/u/:id`. All `alias` and `path` values must share the same params. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[alias](RouteRecordBase.md#alias) + +___ + +### beforeEnter + +• `Optional` **beforeEnter**: [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> \| [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\>[] + +Before Enter guard specific to this record. Note `beforeEnter` has no +effect if the record has a `redirect` property. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[beforeEnter](RouteRecordBase.md#beforeEnter) + +___ + +### children + +• **children**: [`RouteRecordRaw`](../index.md#RouteRecordRaw)[] + +Array of nested routes. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[children](RouteRecordBase.md#children) + +___ + +### component + +• `Optional` **component**: ``null`` \| `RawRouteComponent` + +Component to display when the URL matches this route. + +___ + +### components + +• `Optional` **components**: `undefined` + +___ + +### end + +• `Optional` **end**: `boolean` + +Should the RegExp match until the end by appending a `$` to it. + +**`Default Value`** + +`true` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[end](RouteRecordBase.md#end) + +___ + +### meta + +• `Optional` **meta**: [`RouteMeta`](RouteMeta.md) + +Arbitrary data attached to the record. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[meta](RouteRecordBase.md#meta) + +___ + +### name + +• `Optional` **name**: [`RouteRecordName`](../index.md#RouteRecordName) + +Name for the route record. Must be unique. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[name](RouteRecordBase.md#name) + +___ + +### path + +• **path**: `string` + +Path of the record. Should start with `/` unless the record is the child of +another record. + +**`Example`** + +```ts +`/users/:id` matches `/users/1` as well as `/users/posva`. +``` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[path](RouteRecordBase.md#path) + +___ + +### props + +• `Optional` **props**: `_RouteRecordProps` + +Allow passing down params as props to the component rendered by `router-view`. + +#### Overrides + +[_RouteRecordBase](RouteRecordBase.md).[props](RouteRecordBase.md#props) + +___ + +### redirect + +• `Optional` **redirect**: `RouteRecordRedirectOption` + +Where to redirect if the route is directly matched. The redirection happens +before any navigation guard and triggers a new navigation with the new +target location. + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[redirect](RouteRecordBase.md#redirect) + +___ + +### sensitive + +• `Optional` **sensitive**: `boolean` + +Makes the RegExp case-sensitive. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[sensitive](RouteRecordBase.md#sensitive) + +___ + +### strict + +• `Optional` **strict**: `boolean` + +Whether to disallow a trailing slash or not. + +**`Default Value`** + +`false` + +#### Inherited from + +[_RouteRecordBase](RouteRecordBase.md).[strict](RouteRecordBase.md#strict) diff --git a/packages/docs/api/interfaces/Router.md b/packages/docs/api/interfaces/Router.md index baec77e9c..a1c5ea342 100644 --- a/packages/docs/api/interfaces/Router.md +++ b/packages/docs/api/interfaces/Router.md @@ -8,17 +8,17 @@ editLink: false Router instance. -## Properties %{#Properties}% +## Properties -### currentRoute %{#Properties-currentRoute}% +### currentRoute -• `Readonly` **currentRoute**: `Ref`<[`RouteLocationNormalizedLoaded`](RouteLocationNormalizedLoaded.md)\> +• `Readonly` **currentRoute**: `Ref`\<[`RouteLocationNormalizedLoaded`](RouteLocationNormalizedLoaded.md)\> Current [RouteLocationNormalized](RouteLocationNormalized.md) ___ -### listening %{#Properties-listening}% +### listening • **listening**: `boolean` @@ -26,94 +26,83 @@ Allows turning off the listening of history events. This is a low level api for ___ -### options %{#Properties-options}% +### options • `Readonly` **options**: [`RouterOptions`](RouterOptions.md) Original options object passed to create the Router -## Methods %{#Methods}% +## Methods -### addRoute %{#Methods-addRoute}% +### addRoute ▸ **addRoute**(`parentName`, `route`): () => `void` -Add a new [route record](../index.md#routerecordraw) as the child of an existing route. +Add a new [route record](../index.md#RouteRecordRaw) as the child of an existing route. -#### Parameters %{#Methods-addRoute-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `parentName` | [`RouteRecordName`](../index.md#routerecordname) | Parent Route Record where `route` should be appended at | -| `route` | [`RouteRecordRaw`](../index.md#routerecordraw) | Route Record to add | +| `parentName` | [`RouteRecordName`](../index.md#RouteRecordName) | Parent Route Record where `route` should be appended at | +| `route` | [`RouteRecordRaw`](../index.md#RouteRecordRaw) | Route Record to add | -#### Returns %{#Methods-addRoute-Returns}% +#### Returns `fn` ▸ (): `void` -Add a new [route record](../index.md#routerecordraw) as the child of an existing route. - -##### Returns %{#Methods-addRoute-Returns-Returns}% +##### Returns `void` ▸ **addRoute**(`route`): () => `void` -Add a new [route record](../index.md#routerecordraw) to the router. +Add a new [route record](../index.md#RouteRecordRaw) to the router. -#### Parameters %{#Methods-addRoute-Parameters_1}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `route` | [`RouteRecordRaw`](../index.md#routerecordraw) | Route Record to add | +| `route` | [`RouteRecordRaw`](../index.md#RouteRecordRaw) | Route Record to add | -#### Returns %{#Methods-addRoute-Returns_1}% +#### Returns `fn` ▸ (): `void` -Add a new [route record](../index.md#routerecordraw) to the router. - -##### Returns %{#Methods-addRoute-Returns-Returns_1}% +##### Returns `void` ___ -### afterEach %{#Methods-afterEach}% +### afterEach ▸ **afterEach**(`guard`): () => `void` Add a navigation hook that is executed after every navigation. Returns a function that removes the registered hook. -**`Example`** - -```js -router.afterEach((to, from, failure) => { - if (isNavigationFailure(failure)) { - console.log('failed navigation', failure) - } -}) -``` - -#### Parameters %{#Methods-afterEach-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `guard` | [`NavigationHookAfter`](NavigationHookAfter.md) | navigation hook to add | -#### Returns %{#Methods-afterEach-Returns}% +#### Returns `fn` +a function that removes the registered hook + ▸ (): `void` -Add a navigation hook that is executed after every navigation. Returns a -function that removes the registered hook. +##### Returns + +`void` **`Example`** @@ -125,54 +114,47 @@ router.afterEach((to, from, failure) => { }) ``` -##### Returns %{#Methods-afterEach-Returns-Returns}% - -`void` - ___ -### back %{#Methods-back}% +### back ▸ **back**(): `void` Go back in history if possible by calling `history.back()`. Equivalent to `router.go(-1)`. -#### Returns %{#Methods-back-Returns}% +#### Returns `void` ___ -### beforeEach %{#Methods-beforeEach}% +### beforeEach ▸ **beforeEach**(`guard`): () => `void` Add a navigation guard that executes before any navigation. Returns a function that removes the registered guard. -#### Parameters %{#Methods-beforeEach-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> | navigation guard to add | +| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> | navigation guard to add | -#### Returns %{#Methods-beforeEach-Returns}% +#### Returns `fn` ▸ (): `void` -Add a navigation guard that executes before any navigation. Returns a -function that removes the registered guard. - -##### Returns %{#Methods-beforeEach-Returns-Returns}% +##### Returns `void` ___ -### beforeResolve %{#Methods-beforeResolve}% +### beforeResolve ▸ **beforeResolve**(`guard`): () => `void` @@ -181,30 +163,23 @@ resolved. At this state all component have been fetched and other navigation guards have been successful. Returns a function that removes the registered guard. -**`Example`** - -```js -router.beforeResolve(to => { - if (to.meta.requiresAuth && !isAuthenticated) return false -}) -``` - -#### Parameters %{#Methods-beforeResolve-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)<`undefined`\> | navigation guard to add | +| `guard` | [`NavigationGuardWithThis`](NavigationGuardWithThis.md)\<`undefined`\> | navigation guard to add | -#### Returns %{#Methods-beforeResolve-Returns}% +#### Returns `fn` +a function that removes the registered guard + ▸ (): `void` -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. +##### Returns + +`void` **`Example`** @@ -214,77 +189,73 @@ router.beforeResolve(to => { }) ``` -##### Returns %{#Methods-beforeResolve-Returns-Returns}% - -`void` - ___ -### forward %{#Methods-forward}% +### forward ▸ **forward**(): `void` Go forward in history if possible by calling `history.forward()`. Equivalent to `router.go(1)`. -#### Returns %{#Methods-forward-Returns}% +#### Returns `void` ___ -### getRoutes %{#Methods-getRoutes}% +### getRoutes ▸ **getRoutes**(): [`RouteRecordNormalized`](RouteRecordNormalized.md)[] -Get a full list of all the [route records](../index.md#routerecord). +Get a full list of all the [route records](../index.md#RouteRecord). -#### Returns %{#Methods-getRoutes-Returns}% +#### Returns [`RouteRecordNormalized`](RouteRecordNormalized.md)[] ___ -### go %{#Methods-go}% +### go ▸ **go**(`delta`): `void` Allows you to move forward or backward through the history. Calls `history.go()`. -#### Parameters %{#Methods-go-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `delta` | `number` | The position in the history to which you want to move, relative to the current page | -#### Returns %{#Methods-go-Returns}% +#### Returns `void` ___ -### hasRoute %{#Methods-hasRoute}% +### hasRoute ▸ **hasRoute**(`name`): `boolean` Checks if a route with a given name exists -#### Parameters %{#Methods-hasRoute-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `name` | [`RouteRecordName`](../index.md#routerecordname) | Name of the route to check | +| `name` | [`RouteRecordName`](../index.md#RouteRecordName) | Name of the route to check | -#### Returns %{#Methods-hasRoute-Returns}% +#### Returns `boolean` ___ -### isReady %{#Methods-isReady}% +### isReady -▸ **isReady**(): `Promise`<`void`\> +▸ **isReady**(): `Promise`\<`void`\> Returns a Promise that resolves when the router has completed the initial navigation, which means it has resolved all async enter hooks and async @@ -296,13 +267,13 @@ 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. -#### Returns %{#Methods-isReady-Returns}% +#### Returns -`Promise`<`void`\> +`Promise`\<`void`\> ___ -### onError %{#Methods-onError}% +### onError ▸ **onError**(`handler`): () => `void` @@ -312,102 +283,96 @@ 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. -#### Parameters %{#Methods-onError-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `handler` | `_ErrorHandler` | error handler to register | +| `handler` | `_ErrorListener` | error handler to register | -#### Returns %{#Methods-onError-Returns}% +#### Returns `fn` ▸ (): `void` -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. - -##### Returns %{#Methods-onError-Returns-Returns}% +##### Returns `void` ___ -### push %{#Methods-push}% +### push -▸ **push**(`to`): `Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> +▸ **push**(`to`): `Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> Programmatically navigate to a new URL by pushing an entry in the history stack. -#### Parameters %{#Methods-push-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `to` | [`RouteLocationRaw`](../index.md#routelocationraw) | Route location to navigate to | +| `to` | [`RouteLocationRaw`](../index.md#RouteLocationRaw) | Route location to navigate to | -#### Returns %{#Methods-push-Returns}% +#### Returns -`Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> +`Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> ___ -### removeRoute %{#Methods-removeRoute}% +### removeRoute ▸ **removeRoute**(`name`): `void` Remove an existing route by its name. -#### Parameters %{#Methods-removeRoute-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `name` | [`RouteRecordName`](../index.md#routerecordname) | Name of the route to remove | +| `name` | [`RouteRecordName`](../index.md#RouteRecordName) | Name of the route to remove | -#### Returns %{#Methods-removeRoute-Returns}% +#### Returns `void` ___ -### replace %{#Methods-replace}% +### replace -▸ **replace**(`to`): `Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> +▸ **replace**(`to`): `Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> Programmatically navigate to a new URL by replacing the current entry in the history stack. -#### Parameters %{#Methods-replace-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `to` | [`RouteLocationRaw`](../index.md#routelocationraw) | Route location to navigate to | +| `to` | [`RouteLocationRaw`](../index.md#RouteLocationRaw) | Route location to navigate to | -#### Returns %{#Methods-replace-Returns}% +#### Returns -`Promise`<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> +`Promise`\<`undefined` \| `void` \| [`NavigationFailure`](NavigationFailure.md)\> ___ -### resolve %{#Methods-resolve}% +### resolve -▸ **resolve**(`to`, `currentLocation?`): [`RouteLocation`](RouteLocation.md) & { `href`: `string` } +▸ **resolve**(`to`, `currentLocation?`): [`RouteLocation`](RouteLocation.md) & \{ `href`: `string` } Returns the [normalized version](RouteLocation.md) of a -[route location](../index.md#routelocationraw). Also includes an `href` property +[route location](../index.md#RouteLocationRaw). Also includes an `href` property that includes any existing `base`. By default, the `currentLocation` used is `router.currentRoute` and should only be overridden in advanced use cases. -#### Parameters %{#Methods-resolve-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | -| `to` | [`RouteLocationRaw`](../index.md#routelocationraw) | Raw route location to resolve | +| `to` | [`RouteLocationRaw`](../index.md#RouteLocationRaw) | Raw route location to resolve | | `currentLocation?` | [`RouteLocationNormalizedLoaded`](RouteLocationNormalizedLoaded.md) | Optional current location to resolve against | -#### Returns %{#Methods-resolve-Returns}% +#### Returns -[`RouteLocation`](RouteLocation.md) & { `href`: `string` } +[`RouteLocation`](RouteLocation.md) & \{ `href`: `string` } diff --git a/packages/docs/api/interfaces/RouterHistory.md b/packages/docs/api/interfaces/RouterHistory.md index 7349c181c..8108fd93e 100644 --- a/packages/docs/api/interfaces/RouterHistory.md +++ b/packages/docs/api/interfaces/RouterHistory.md @@ -9,9 +9,9 @@ editLink: false Interface implemented by History implementations that can be passed to the router as Router.history -## Properties %{#Properties}% +## Properties -### base %{#Properties-base}% +### base • `Readonly` **base**: `string` @@ -21,7 +21,7 @@ sub-folder of a domain like `example.com/sub-folder` by having a `base` of ___ -### location %{#Properties-location}% +### location • `Readonly` **location**: `string` @@ -29,71 +29,71 @@ Current History location ___ -### state %{#Properties-state}% +### state • `Readonly` **state**: [`HistoryState`](HistoryState.md) Current History state -## Methods %{#Methods}% +## Methods -### createHref %{#Methods-createHref}% +### createHref ▸ **createHref**(`location`): `string` Generates the corresponding href to be used in an anchor tag. -#### Parameters %{#Methods-createHref-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `location` | `string` | history location that should create an href | -#### Returns %{#Methods-createHref-Returns}% +#### Returns `string` ___ -### destroy %{#Methods-destroy}% +### destroy ▸ **destroy**(): `void` Clears any event listener attached by the history implementation. -#### Returns %{#Methods-destroy-Returns}% +#### Returns `void` ___ -### go %{#Methods-go}% +### go ▸ **go**(`delta`, `triggerListeners?`): `void` Traverses history in a given direction. -**`Example`** - -```js -myHistory.go(-1) // equivalent to window.history.back() -myHistory.go(1) // equivalent to window.history.forward() -``` - -#### Parameters %{#Methods-go-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `delta` | `number` | distance to travel. If delta is \< 0, it will go back, if it's \> 0, it will go forward by that amount of entries. | | `triggerListeners?` | `boolean` | whether this should trigger listeners attached to the history | -#### Returns %{#Methods-go-Returns}% +#### Returns `void` +**`Example`** + +```js +myHistory.go(-1) // equivalent to window.history.back() +myHistory.go(1) // equivalent to window.history.forward() +``` + ___ -### listen %{#Methods-listen}% +### listen ▸ **listen**(`callback`): () => `void` @@ -102,13 +102,13 @@ navigation is triggered from outside (like the Browser back and forward buttons) or when passing `true` to RouterHistory.back and RouterHistory.forward -#### Parameters %{#Methods-listen-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `callback` | `NavigationCallback` | listener to attach | -#### Returns %{#Methods-listen-Returns}% +#### Returns `fn` @@ -116,53 +116,46 @@ a callback to remove the listener ▸ (): `void` -Attach a listener to the History implementation that is triggered when the -navigation is triggered from outside (like the Browser back and forward -buttons) or when passing `true` to RouterHistory.back and -RouterHistory.forward - -##### Returns %{#Methods-listen-Returns-Returns}% +##### Returns `void` -a callback to remove the listener - ___ -### push %{#Methods-push}% +### push ▸ **push**(`to`, `data?`): `void` Navigates to a location. In the case of an HTML5 History implementation, this will call `history.pushState` to effectively change the URL. -#### Parameters %{#Methods-push-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `to` | `string` | location to push | | `data?` | [`HistoryState`](HistoryState.md) | optional [HistoryState](HistoryState.md) to be associated with the navigation entry | -#### Returns %{#Methods-push-Returns}% +#### Returns `void` ___ -### replace %{#Methods-replace}% +### replace ▸ **replace**(`to`, `data?`): `void` -Same as [push](RouterHistory.md#push) but performs a `history.replaceState` +Same as [RouterHistory.push](RouterHistory.md#push) but performs a `history.replaceState` instead of `history.pushState` -#### Parameters %{#Methods-replace-Parameters}% +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | | `to` | `string` | location to set | | `data?` | [`HistoryState`](HistoryState.md) | optional [HistoryState](HistoryState.md) to be associated with the navigation entry | -#### Returns %{#Methods-replace-Returns}% +#### Returns `void` diff --git a/packages/docs/api/interfaces/RouterLinkProps.md b/packages/docs/api/interfaces/RouterLinkProps.md index af43373d6..e8aa8778d 100644 --- a/packages/docs/api/interfaces/RouterLinkProps.md +++ b/packages/docs/api/interfaces/RouterLinkProps.md @@ -6,15 +6,15 @@ editLink: false # Interface: RouterLinkProps -## Hierarchy %{#Hierarchy}% +## Hierarchy - `RouterLinkOptions` ↳ **`RouterLinkProps`** -## Properties %{#Properties}% +## Properties -### activeClass %{#Properties-activeClass}% +### activeClass • `Optional` **activeClass**: `string` @@ -22,7 +22,7 @@ Class to apply when the link is active ___ -### ariaCurrentValue %{#Properties-ariaCurrentValue}% +### ariaCurrentValue • `Optional` **ariaCurrentValue**: ``"location"`` \| ``"time"`` \| ``"page"`` \| ``"step"`` \| ``"date"`` \| ``"true"`` \| ``"false"`` @@ -34,7 +34,7 @@ Value passed to the attribute `aria-current` when the link is exact active. ___ -### custom %{#Properties-custom}% +### custom • `Optional` **custom**: `boolean` @@ -43,7 +43,7 @@ using `v-slot` to create a custom RouterLink ___ -### exactActiveClass %{#Properties-exactActiveClass}% +### exactActiveClass • `Optional` **exactActiveClass**: `string` @@ -51,24 +51,24 @@ Class to apply when the link is exact active ___ -### replace %{#Properties-replace}% +### replace • `Optional` **replace**: `boolean` Calls `router.replace` instead of `router.push`. -#### Inherited from %{#Properties-replace-Inherited-from}% +#### Inherited from RouterLinkOptions.replace ___ -### to %{#Properties-to}% +### to -• **to**: [`RouteLocationRaw`](../index.md#routelocationraw) +• **to**: [`RouteLocationRaw`](../index.md#RouteLocationRaw) Route Location the link should navigate to when clicked on. -#### Inherited from %{#Properties-to-Inherited-from}% +#### Inherited from RouterLinkOptions.to diff --git a/packages/docs/api/interfaces/RouterOptions.md b/packages/docs/api/interfaces/RouterOptions.md index 2779cb0b5..f431256df 100644 --- a/packages/docs/api/interfaces/RouterOptions.md +++ b/packages/docs/api/interfaces/RouterOptions.md @@ -8,15 +8,15 @@ editLink: false Options to initialize a [Router](Router.md) instance. -## Hierarchy %{#Hierarchy}% +## Hierarchy -- [`PathParserOptions`](../index.md#pathparseroptions) +- [`PathParserOptions`](../index.md#PathParserOptions) ↳ **`RouterOptions`** -## Properties %{#Properties}% +## Properties -### end %{#Properties-end}% +### end • `Optional` **end**: `boolean` @@ -26,13 +26,13 @@ Should the RegExp match until the end by appending a `$` to it. `true` -#### Inherited from %{#Properties-end-Inherited-from}% +#### Inherited from PathParserOptions.end ___ -### history %{#Properties-history}% +### history • **history**: [`RouterHistory`](RouterHistory.md) @@ -53,34 +53,30 @@ createRouter({ ___ -### linkActiveClass %{#Properties-linkActiveClass}% +### linkActiveClass • `Optional` **linkActiveClass**: `string` -Default class applied to active [RouterLink](../index.md#routerlink). If none is provided, +Default class applied to active [RouterLink](../index.md#RouterLink). If none is provided, `router-link-active` will be applied. ___ -### linkExactActiveClass %{#Properties-linkExactActiveClass}% +### linkExactActiveClass • `Optional` **linkExactActiveClass**: `string` -Default class applied to exact active [RouterLink](../index.md#routerlink). If none is provided, +Default class applied to exact active [RouterLink](../index.md#RouterLink). If none is provided, `router-link-exact-active` will be applied. ___ -### parseQuery %{#Properties-parseQuery}% +### parseQuery -• `Optional` **parseQuery**: (`search`: `string`) => [`LocationQuery`](../index.md#locationquery) - -#### Type declaration %{#Properties-parseQuery-Type-declaration}% - -▸ (`search`): [`LocationQuery`](../index.md#locationquery) +• `Optional` **parseQuery**: (`search`: `string`) => [`LocationQuery`](../index.md#LocationQuery) Custom implementation to parse a query. See its counterpart, -[stringifyQuery](RouterOptions.md#stringifyquery). +[RouterOptions.stringifyQuery](RouterOptions.md#stringifyQuery). **`Example`** @@ -96,27 +92,48 @@ createRouter({ }) ``` -##### Parameters %{#Properties-parseQuery-Type-declaration-Parameters}% +#### Type declaration + +▸ (`search`): [`LocationQuery`](../index.md#LocationQuery) + +Custom implementation to parse a query. See its counterpart, +[RouterOptions.stringifyQuery](RouterOptions.md#stringifyQuery). + +##### Parameters | Name | Type | | :------ | :------ | | `search` | `string` | -##### Returns %{#Properties-parseQuery-Type-declaration-Returns}% +##### Returns + +[`LocationQuery`](../index.md#LocationQuery) + +**`Example`** + +Let's say you want to use the [qs package](https://github.com/ljharb/qs) +to parse queries, you can provide both `parseQuery` and `stringifyQuery`: +```js +import qs from 'qs' -[`LocationQuery`](../index.md#locationquery) +createRouter({ + // other options... + parseQuery: qs.parse, + stringifyQuery: qs.stringify, +}) +``` ___ -### routes %{#Properties-routes}% +### routes -• **routes**: readonly [`RouteRecordRaw`](../index.md#routerecordraw)[] +• **routes**: readonly [`RouteRecordRaw`](../index.md#RouteRecordRaw)[] Initial list of routes that should be added to the router. ___ -### scrollBehavior %{#Properties-scrollBehavior}% +### scrollBehavior • `Optional` **scrollBehavior**: [`RouterScrollBehavior`](RouterScrollBehavior.md) @@ -134,7 +151,7 @@ function scrollBehavior(to, from, savedPosition) { ___ -### sensitive %{#Properties-sensitive}% +### sensitive • `Optional` **sensitive**: `boolean` @@ -144,13 +161,13 @@ Makes the RegExp case-sensitive. `false` -#### Inherited from %{#Properties-sensitive-Inherited-from}% +#### Inherited from PathParserOptions.sensitive ___ -### strict %{#Properties-strict}% +### strict • `Optional` **strict**: `boolean` @@ -160,29 +177,32 @@ Whether to disallow a trailing slash or not. `false` -#### Inherited from %{#Properties-strict-Inherited-from}% +#### Inherited from PathParserOptions.strict ___ -### stringifyQuery %{#Properties-stringifyQuery}% +### stringifyQuery -• `Optional` **stringifyQuery**: (`query`: [`LocationQueryRaw`](../index.md#locationqueryraw)) => `string` +• `Optional` **stringifyQuery**: (`query`: [`LocationQueryRaw`](../index.md#LocationQueryRaw)) => `string` + +Custom implementation to stringify a query object. Should not prepend a leading `?`. +[parseQuery](RouterOptions.md#parseQuery) counterpart to handle query parsing. -#### Type declaration %{#Properties-stringifyQuery-Type-declaration}% +#### Type declaration ▸ (`query`): `string` Custom implementation to stringify a query object. Should not prepend a leading `?`. -[parseQuery](RouterOptions.md#parsequery) counterpart to handle query parsing. +[parseQuery](RouterOptions.md#parseQuery) counterpart to handle query parsing. -##### Parameters %{#Properties-stringifyQuery-Type-declaration-Parameters}% +##### Parameters | Name | Type | | :------ | :------ | -| `query` | [`LocationQueryRaw`](../index.md#locationqueryraw) | +| `query` | [`LocationQueryRaw`](../index.md#LocationQueryRaw) | -##### Returns %{#Properties-stringifyQuery-Type-declaration-Returns}% +##### Returns `string` diff --git a/packages/docs/api/interfaces/RouterScrollBehavior.md b/packages/docs/api/interfaces/RouterScrollBehavior.md index ee3c2affe..049a72503 100644 --- a/packages/docs/api/interfaces/RouterScrollBehavior.md +++ b/packages/docs/api/interfaces/RouterScrollBehavior.md @@ -6,13 +6,15 @@ editLink: false # Interface: RouterScrollBehavior -## Callable %{#Callable}% +Type of the `scrollBehavior` option that can be passed to `createRouter`. -### RouterScrollBehavior %{#Callable-RouterScrollBehavior}% +## Callable -▸ **RouterScrollBehavior**(`to`, `from`, `savedPosition`): `Awaitable`<``false`` \| `void` \| `ScrollPosition`\> +### RouterScrollBehavior -#### Parameters %{#Callable-RouterScrollBehavior-Parameters}% +▸ **RouterScrollBehavior**(`to`, `from`, `savedPosition`): `Awaitable`\<``false`` \| `void` \| `ScrollPosition`\> + +#### Parameters | Name | Type | Description | | :------ | :------ | :------ | @@ -20,6 +22,6 @@ editLink: false | `from` | [`RouteLocationNormalizedLoaded`](RouteLocationNormalizedLoaded.md) | Route location where we are navigating from | | `savedPosition` | ``null`` \| `_ScrollPositionNormalized` | saved position if it exists, `null` otherwise | -#### Returns %{#Callable-RouterScrollBehavior-Returns}% +#### Returns -`Awaitable`<``false`` \| `void` \| `ScrollPosition`\> +`Awaitable`\<``false`` \| `void` \| `ScrollPosition`\> diff --git a/packages/docs/api/interfaces/RouterViewProps.md b/packages/docs/api/interfaces/RouterViewProps.md index e5c8034a0..30fc957d2 100644 --- a/packages/docs/api/interfaces/RouterViewProps.md +++ b/packages/docs/api/interfaces/RouterViewProps.md @@ -6,14 +6,14 @@ editLink: false # Interface: RouterViewProps -## Properties %{#Properties}% +## Properties -### name %{#Properties-name}% +### name • `Optional` **name**: `string` ___ -### route %{#Properties-route}% +### route • `Optional` **route**: [`RouteLocationNormalized`](RouteLocationNormalized.md) diff --git a/packages/docs/guide/advanced/composition-api.md b/packages/docs/guide/advanced/composition-api.md index dd1d50aa8..3e9213f78 100644 --- a/packages/docs/guide/advanced/composition-api.md +++ b/packages/docs/guide/advanced/composition-api.md @@ -5,7 +5,7 @@ title="Learn how to use Vue Router with the composition API" /> -The introduction of `setup` and Vue's [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html), open up new possibilities but to be able to get the full potential out of Vue Router, we will need to use a few new functions to replace access to `this` and in-component navigation guards. +The introduction of `setup` and Vue's [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html), open up new possibilities but to be able to get the full potential out of Vue Router, we will need to use a few new functions to replace access to `this` and in-component navigation guards. ## Accessing the Router and current Route inside `setup` diff --git a/packages/docs/guide/advanced/dynamic-routing.md b/packages/docs/guide/advanced/dynamic-routing.md index 86fd3aacb..a2ad81a79 100644 --- a/packages/docs/guide/advanced/dynamic-routing.md +++ b/packages/docs/guide/advanced/dynamic-routing.md @@ -5,9 +5,9 @@ title="Learn how to add routes at runtime" /> -Adding routes to your router is usually done via the [`routes` option](../../api/#routes) but in some situations, you might want to add or remove routes while the application is already running. Application with extensible interfaces like [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) can use this to make the application grow. +Adding routes to your router is usually done via the `routes` option but in some situations, you might want to add or remove routes while the application is already running. Application with extensible interfaces like [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) can use this to make the application grow. -## Adding Routes +## Adding routes Dynamic routing is achieved mainly via two functions: `router.addRoute()` and `router.removeRoute()`. They **only** register a new route, meaning that if the newly added route matches the current location, it would require you to **manually navigate** with `router.push()` or `router.replace()` to display that new route. Let's take a look at an example: @@ -36,7 +36,7 @@ router.replace(router.currentRoute.value.fullPath) Remember you can `await router.replace()` if you need to wait for the new route to be displayed. -## Adding Routes inside navigation guards +## Adding routes inside navigation guards If you decide to add or remove routes inside of a navigation guard, you should not call `router.replace()` but trigger a redirection by returning the new location: @@ -62,7 +62,8 @@ There are few different ways to remove existing routes: ```js router.addRoute({ path: '/about', name: 'about', component: About }) - // this will remove the previously added route because they have the same name and names are unique + // this will remove the previously added route because they have + // the same name and names are unique across all routes router.addRoute({ path: '/other', name: 'about', component: Other }) ``` @@ -110,5 +111,5 @@ router.addRoute({ Vue Router gives you two functions to look at existing routes: -- [`router.hasRoute()`](/api/interfaces/Router.md#Methods-hasRoute): check if a route exists -- [`router.getRoutes()`](/api/interfaces/Router.md#Methods-getRoutes): get an array with all the route records. +- [`router.hasRoute()`](/api/interfaces/Router.md#hasRoute): check if a route exists +- [`router.getRoutes()`](/api/interfaces/Router.md#getRoutes): get an array with all the route records. diff --git a/packages/docs/guide/advanced/lazy-loading.md b/packages/docs/guide/advanced/lazy-loading.md index e4ac1dab3..d33099c88 100644 --- a/packages/docs/guide/advanced/lazy-loading.md +++ b/packages/docs/guide/advanced/lazy-loading.md @@ -17,7 +17,11 @@ const UserDetails = () => import('./views/UserDetails.vue') const router = createRouter({ // ... - routes: [{ path: '/users/:id', component: UserDetails }], + routes: [ + { path: '/users/:id', component: UserDetails } + // or use it directly in the route definition + { path: '/users/:id', component: () => import('./views/UserDetails.vue') }, + ], }) ``` @@ -33,7 +37,7 @@ const UserDetails = () => In general, it's a good idea **to always use dynamic imports** for all your routes. ::: tip Note -Do **not** use [Async components](https://v3.vuejs.org/guide/component-dynamic-async.html#async-components) for routes. Async components can still be used inside route components but route component themselves are just dynamic imports. +Do **not** use [Async components](https://vuejs.org/guide/components/async.html) for routes. Async components can still be used inside route components but route component themselves are just dynamic imports. ::: When using a bundler like webpack, this will automatically benefit from [code splitting](https://webpack.js.org/guides/code-splitting/) diff --git a/packages/docs/guide/advanced/meta.md b/packages/docs/guide/advanced/meta.md index e6cf46729..7c5f045d8 100644 --- a/packages/docs/guide/advanced/meta.md +++ b/packages/docs/guide/advanced/meta.md @@ -17,16 +17,16 @@ const routes = [ path: 'new', component: PostsNew, // only authenticated users can create posts - meta: { requiresAuth: true } + meta: { requiresAuth: true }, }, { path: ':id', component: PostsDetail, // anybody can read a post - meta: { requiresAuth: false } - } - ] - } + meta: { requiresAuth: false }, + }, + ], + }, ] ``` @@ -62,12 +62,13 @@ It is possible to type the meta field by extending the `RouteMeta` interface fro ```ts // This can be directly added to any of your `.ts` files like `router.ts` -// It can also be added to a `.d.ts` file, in which case you will need to add an export -// to ensure it is treated as a module -export {} - +// It can also be added to a `.d.ts` file. Make sure it's included in +// project's tsconfig.json "files" import 'vue-router' +// To ensure it is treated as a module, add at least one `export` statement +export {} + declare module 'vue-router' { interface RouteMeta { // is optional diff --git a/packages/docs/guide/advanced/navigation-failures.md b/packages/docs/guide/advanced/navigation-failures.md index b299075ac..fb43286b7 100644 --- a/packages/docs/guide/advanced/navigation-failures.md +++ b/packages/docs/guide/advanced/navigation-failures.md @@ -62,6 +62,18 @@ if (isNavigationFailure(failure, NavigationFailureType.aborted)) { If you omit the second parameter: `isNavigationFailure(failure)`, it will only check if `failure` is a _Navigation Failure_. ::: +## Global navigation failures + +You can detect global navigation failures globally by using the [`router.afterEach()` navigation guard](./navigation-guards.md#Global-After-Hooks): + +```ts +router.afterEach((to, from, failure) => { + if (failure) { + sendToAnalytics(to, from, failure) + } +}) +``` + ## Differentiating Navigation Failures As we said at the beginning, there are different situations aborting a navigation, all of them resulting in different _Navigation Failures_. They can be differentiated using the `isNavigationFailure` and `NavigationFailureType`. There are three different types: diff --git a/packages/docs/guide/advanced/navigation-guards.md b/packages/docs/guide/advanced/navigation-guards.md index 65c2532f0..57884d3c7 100644 --- a/packages/docs/guide/advanced/navigation-guards.md +++ b/packages/docs/guide/advanced/navigation-guards.md @@ -25,13 +25,13 @@ Global before guards are called in creation order, whenever a navigation is trig Every guard function receives two arguments: -- **`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. +- **`to`**: the target route location [in a normalized format](../../api/interfaces/RouteLocationNormalized.md) being navigated to. +- **`from`**: the current route location [in a normalized format](../../api/interfaces/RouteLocationNormalized.md) 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/#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`. +- A [Route Location](../../api/#RouteLocationRaw): Redirect to a different location by passing a route location as if you were calling `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`. ```js router.beforeEach(async (to, from) => { @@ -47,7 +47,7 @@ And can optionally return any of the following values: }) ``` -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). +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/interfaces/Router.md#onError). If nothing, `undefined` or `true` is returned, **the navigation is validated**, and the next navigation guard is called. @@ -197,7 +197,28 @@ const routes = [ ] ``` -Note it is possible to achieve a similar behavior by using [route meta fields](./meta.md) and [global navigation guards](#global-before-guards). +When working with [nested routes](../essentials/nested-routes), both parent and child routes can use `beforeEnter`. When placed on a parent route, it won't be triggered when moving between children with that same parent. For example: + +```js +const routes = [ + { + path: '/user', + beforeEnter() { + // ... + }, + children: [ + { path: 'list', component: UserList }, + { path: 'details', component: UserDetails }, + ], + }, +] +``` + +The `beforeEnter` in the example above won't be called when moving between `/user/list` and `/user/details`, as they share the same parent. If we put the `beforeEnter` guard directly on the `details` route instead, that would be called when moving between those two routes. + +::: tip +It is possible to achieve similar behavior to per-route guards by using [route meta fields](./meta) and global navigation guards. +::: ## In-Component Guards @@ -264,7 +285,7 @@ beforeRouteLeave (to, from) { ### Using the composition API -If you are writing your component using the [composition API and a `setup` function](https://v3.vuejs.org/guide/composition-api-setup.html#setup), you can add update and leave guards through `onBeforeRouteUpdate` and `onBeforeRouteLeave` respectively. Please refer to the [Composition API section](./composition-api.md#navigation-guards) for more details. +If you are writing your component using the [composition API and a `setup` function](https://vuejs.org/api/composition-api-setup.html), you can add update and leave guards through `onBeforeRouteUpdate` and `onBeforeRouteLeave` respectively. Please refer to the [Composition API section](./composition-api.md#navigation-guards) for more details. ## The Full Navigation Resolution Flow diff --git a/packages/docs/guide/advanced/router-view-slot.md b/packages/docs/guide/advanced/router-view-slot.md new file mode 100644 index 000000000..ded51b493 --- /dev/null +++ b/packages/docs/guide/advanced/router-view-slot.md @@ -0,0 +1,73 @@ +# RouterView slot + +The RouterView component exposes a slot that can be used to render the route component: + +```vue-html + + + +``` + +The code above is equivalent to using `` without the slot, but the slot provides extra flexibility when we want to work with other features. + +## KeepAlive & Transition + +When working with the [KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.html) component, we would usually want it to keep the route components alive, not the RouterView itself. We can achieve that by putting the KeepAlive inside the slot: + +```vue-html + + + + + +``` + +Similarly, the slot allows us to use a [Transition](https://vuejs.org/guide/built-ins/transition.html) component to transition between route components: + +```vue-html + + + + + +``` + +We can also use KeepAlive inside a Transition: + +```vue-html + + + + + + + +``` + +For more information about using RouterView with the Transition component, see the [Transitions](./transitions) guide. + +## Passing props and slots + +We can use the slot to pass props or slots to the route component: + +```vue-html + + +

Some slotted content

+ + +``` + +In practice, this usually isn't something you would want to do, as the route components would **all need to use the same props and slots**. See [Passing Props to Route Components](../essentials/passing-props) for other ways to pass props. + +## Template refs + +Using the slot allows us to put a [template ref](https://vuejs.org/guide/essentials/template-refs.html) directly on the route component: + +```vue-html + + + +``` + +If we put the ref on the `` instead then the ref would be populated with the RouterView instance, rather than the route component. diff --git a/packages/docs/guide/advanced/scroll-behavior.md b/packages/docs/guide/advanced/scroll-behavior.md index 7487044cf..b4f766409 100644 --- a/packages/docs/guide/advanced/scroll-behavior.md +++ b/packages/docs/guide/advanced/scroll-behavior.md @@ -44,7 +44,8 @@ const router = createRouter({ // could also be // el: document.getElementById('main'), el: '#main', - top: -10, + // 10px above the element + top: 10, } }, }) diff --git a/packages/docs/guide/advanced/transitions.md b/packages/docs/guide/advanced/transitions.md index cc3fe6c97..3af7f6ada 100644 --- a/packages/docs/guide/advanced/transitions.md +++ b/packages/docs/guide/advanced/transitions.md @@ -5,9 +5,9 @@ title="Learn about route transitions" /> -In order to use transitions on your route components and animate navigations, you need to use the v-slot API: +In order to use transitions on your route components and animate navigations, you need to use the [`` slot](./router-view-slot): -```html +```vue-html @@ -15,7 +15,7 @@ In order to use transitions on your route components and animate navigations, yo ``` -[All transition APIs](https://v3.vuejs.org/guide/transitions-enterleave.html) work the same here. +[All transition APIs](https://vuejs.org/guide/built-ins/transition.html) work the same here. ## Per-Route Transition @@ -36,9 +36,9 @@ const routes = [ ] ``` -```html +```vue-html - + @@ -49,7 +49,7 @@ const routes = [ It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route. Using a very similar snippet to the one just before: -```html +```vue-html @@ -58,7 +58,7 @@ It is also possible to determine the transition to use dynamically based on the ``` -We can add an [after navigation hook](./navigation-guards.md#global-after-hooks) to dynamically add information to the `meta` field based on the depth of the route +We can add an [after navigation hook](./navigation-guards.md#Global-After-Hooks) to dynamically add information to the `meta` field based on the depth of the route ```js router.afterEach((to, from) => { @@ -70,9 +70,9 @@ router.afterEach((to, from) => { ## Forcing a transition between reused views -Vue might automatically reuse components that look alike, avoiding any transition. Fortunately, it is possible [to add a `key` attribute](https://v3.vuejs.org/api/special-attributes.html#key) to force transitions. This also allows you to trigger transitions while staying on the same route with different params: +Vue might automatically reuse components that look alike, avoiding any transition. Fortunately, it is possible [to add a `key` attribute](https://vuejs.org/api/built-in-special-attributes.html#key) to force transitions. This also allows you to trigger transitions while staying on the same route with different params: -```vue +```vue-html diff --git a/packages/docs/guide/essentials/dynamic-matching.md b/packages/docs/guide/essentials/dynamic-matching.md index fb71f134a..f74ab649d 100644 --- a/packages/docs/guide/essentials/dynamic-matching.md +++ b/packages/docs/guide/essentials/dynamic-matching.md @@ -5,7 +5,7 @@ title="Learn about dynamic route matching with params" /> -Very often we will need to map routes with the given pattern to the same component. For example we may have a `User` component which should be rendered for all users but with different user IDs. In Vue Router we can use a dynamic segment in the path to achieve that, we call that a _param_: +Very often we will need to map routes with the given pattern to the same component. For example, we may have a `User` component which should be rendered for all users but with different user IDs. In Vue Router we can use a dynamic segment in the path to achieve that, we call that a _param_: ```js const User = { @@ -36,7 +36,7 @@ You can have multiple _params_ in the same route, and they will map to correspon | /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/#routelocationnormalized). +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/interfaces/RouteLocationNormalized.md). A working demo of this example can be found [here](https://codesandbox.io/s/route-params-vue-router-examples-mlb14?from-embed&initialpath=%2Fusers%2Feduardo%2Fposts%2F1). @@ -103,7 +103,7 @@ const routes = [ ] ``` -In this specific scenario we are using a [custom regexp](./route-matching-syntax.md#custom-regexp-in-params) between parentheses and marking the `pathMatch` param as [optionally repeatable](./route-matching-syntax.md#optional-parameters). This allows us to directly navigate to the route if we need to by splitting the `path` into an array: +In this specific scenario, we are using a [custom regexp](./route-matching-syntax.md#custom-regexp-in-params) between parentheses and marking the `pathMatch` param as [optionally repeatable](./route-matching-syntax.md#optional-parameters). This allows us to directly navigate to the route if we need to by splitting the `path` into an array: ```js this.$router.push({ @@ -116,7 +116,7 @@ this.$router.push({ }) ``` -See more in the [repeated params](./route-matching-syntax.md#repeatable-params) section. +See more in the [repeated params](./route-matching-syntax.md#Repeatable-params) section. If you are using [History mode](./history-mode.md), make sure to follow the instructions to correctly configure your server as well. diff --git a/packages/docs/guide/essentials/history-mode.md b/packages/docs/guide/essentials/history-mode.md index 32955f33c..8cb720e93 100644 --- a/packages/docs/guide/essentials/history-mode.md +++ b/packages/docs/guide/essentials/history-mode.md @@ -64,7 +64,7 @@ While it's not recommended, you can use this mode inside Browser applications bu ## 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](../../api/#Functions-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/`). +**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/interfaces/Router.md#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 @@ -83,7 +83,7 @@ While it's not recommended, you can use this mode inside Browser applications bu ``` -Instead of `mod_rewrite`, you could also use [`FallbackResource`](https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource). +Instead of `mod_rewrite`, you could also use [`FallbackResource`](https://httpd.apache.org/docs/2.4/mod/mod_dir.html#fallbackresource). ### nginx @@ -214,4 +214,4 @@ const router = createRouter({ }) ``` -Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL and respond with 404 if no route is matched. Check out the [Vue server side rendering documentation](https://v3.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr) for more information. +Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL and respond with 404 if no route is matched. Check out the [Vue server side rendering documentation](https://vuejs.org/guide/scaling-up/ssr.html) for more information. diff --git a/packages/docs/guide/essentials/named-routes.md b/packages/docs/guide/essentials/named-routes.md index 5c3298696..51d1cda1e 100644 --- a/packages/docs/guide/essentials/named-routes.md +++ b/packages/docs/guide/essentials/named-routes.md @@ -24,7 +24,7 @@ const routes = [ To link to a named route, you can pass an object to the `router-link` component's `to` prop: -```html +```vue-html User @@ -39,3 +39,5 @@ router.push({ name: 'user', params: { username: 'erina' } }) In both cases, the router will navigate to the path `/user/erina`. Full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). + +Each name **must be unique** across all routes. If you add the same name to multiple routes, the router will only keep the last one. You can read more about this [in the Dynamic Routing](../advanced/dynamic-routing.md#Removing-routes) section. diff --git a/packages/docs/guide/essentials/named-views.md b/packages/docs/guide/essentials/named-views.md index f86044799..917b73bc5 100644 --- a/packages/docs/guide/essentials/named-views.md +++ b/packages/docs/guide/essentials/named-views.md @@ -7,7 +7,7 @@ Sometimes you need to display multiple views at the same time instead of nesting them, e.g. creating a layout with a `sidebar` view and a `main` view. This is where named views come in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A `router-view` without a name will be given `default` as its name. -```html +```vue-html @@ -61,7 +61,7 @@ It is possible to create complex layouts using named views with nested views. Wh The `