Repository: vuejs/vue-router Branch: dev Commit: 680ccc68c506 Files: 458 Total size: 1.4 MB Directory structure: gitextract_7kypz9ur/ ├── .babelrc ├── .circleci/ │ └── config.yml ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .github/ │ ├── ISSUE_TEMPLATE.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── funding.yml │ └── workflows/ │ └── release-tag.yml ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── build/ │ ├── build.js │ ├── configs.js │ └── rollup.dev.config.js ├── composables.d.ts ├── composables.js ├── composables.mjs ├── dist/ │ ├── vue-router.common.js │ ├── vue-router.esm.browser.js │ ├── vue-router.esm.js │ ├── vue-router.js │ └── vue-router.mjs ├── docs/ │ ├── .vuepress/ │ │ ├── components/ │ │ │ ├── HomeSponsors.vue │ │ │ ├── HomeSponsorsGroup.vue │ │ │ └── sponsors.json │ │ ├── config.js │ │ ├── public/ │ │ │ └── _redirects │ │ ├── styles/ │ │ │ └── index.styl │ │ └── theme/ │ │ ├── Layout.vue │ │ ├── components/ │ │ │ ├── BuySellAds.vue │ │ │ ├── CarbonAds.vue │ │ │ └── VueSchool/ │ │ │ └── BannerTop.vue │ │ └── index.js │ ├── README.md │ ├── api/ │ │ └── README.md │ ├── fr/ │ │ ├── README.md │ │ ├── api/ │ │ │ └── README.md │ │ ├── guide/ │ │ │ ├── README.md │ │ │ ├── advanced/ │ │ │ │ ├── data-fetching.md │ │ │ │ ├── lazy-loading.md │ │ │ │ ├── meta.md │ │ │ │ ├── navigation-guards.md │ │ │ │ ├── scroll-behavior.md │ │ │ │ └── transitions.md │ │ │ └── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── guide/ │ │ ├── README.md │ │ ├── advanced/ │ │ │ ├── data-fetching.md │ │ │ ├── lazy-loading.md │ │ │ ├── meta.md │ │ │ ├── navigation-failures.md │ │ │ ├── navigation-guards.md │ │ │ ├── scroll-behavior.md │ │ │ └── transitions.md │ │ └── essentials/ │ │ ├── dynamic-matching.md │ │ ├── history-mode.md │ │ ├── named-routes.md │ │ ├── named-views.md │ │ ├── navigation.md │ │ ├── nested-routes.md │ │ ├── passing-props.md │ │ └── redirect-and-alias.md │ ├── installation.md │ ├── ja/ │ │ ├── README.md │ │ ├── api/ │ │ │ └── README.md │ │ ├── guide/ │ │ │ ├── README.md │ │ │ ├── advanced/ │ │ │ │ ├── data-fetching.md │ │ │ │ ├── lazy-loading.md │ │ │ │ ├── meta.md │ │ │ │ ├── navigation-failures.md │ │ │ │ ├── navigation-guards.md │ │ │ │ ├── scroll-behavior.md │ │ │ │ └── transitions.md │ │ │ └── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── kr/ │ │ ├── README.md │ │ ├── api/ │ │ │ └── README.md │ │ ├── guide/ │ │ │ ├── README.md │ │ │ ├── advanced/ │ │ │ │ ├── data-fetching.md │ │ │ │ ├── lazy-loading.md │ │ │ │ ├── meta.md │ │ │ │ ├── navigation-guards.md │ │ │ │ ├── scroll-behavior.md │ │ │ │ └── transitions.md │ │ │ └── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── getting-started.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── ru/ │ │ ├── README.md │ │ ├── api/ │ │ │ └── README.md │ │ ├── guide/ │ │ │ ├── README.md │ │ │ ├── advanced/ │ │ │ │ ├── data-fetching.md │ │ │ │ ├── lazy-loading.md │ │ │ │ ├── meta.md │ │ │ │ ├── navigation-failures.md │ │ │ │ ├── navigation-guards.md │ │ │ │ ├── scroll-behavior.md │ │ │ │ └── transitions.md │ │ │ └── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ └── zh/ │ ├── README.md │ ├── api/ │ │ └── README.md │ ├── guide/ │ │ ├── README.md │ │ ├── advanced/ │ │ │ ├── data-fetching.md │ │ │ ├── lazy-loading.md │ │ │ ├── meta.md │ │ │ ├── navigation-failures.md │ │ │ ├── navigation-guards.md │ │ │ ├── scroll-behavior.md │ │ │ └── transitions.md │ │ └── essentials/ │ │ ├── dynamic-matching.md │ │ ├── history-mode.md │ │ ├── named-routes.md │ │ ├── named-views.md │ │ ├── navigation.md │ │ ├── nested-routes.md │ │ ├── passing-props.md │ │ └── redirect-and-alias.md │ └── installation.md ├── docs-gitbook/ │ ├── LANGS.md │ ├── assets/ │ │ ├── CNAME │ │ └── circle.yml │ ├── book.json │ ├── de/ │ │ ├── SUMMARY.md │ │ ├── advanced/ │ │ │ ├── data-fetching.md │ │ │ ├── lazy-loading.md │ │ │ ├── meta.md │ │ │ ├── navigation-guards.md │ │ │ ├── scroll-behavior.md │ │ │ └── transitions.md │ │ ├── api/ │ │ │ ├── component-injections.md │ │ │ ├── options.md │ │ │ ├── route-object.md │ │ │ ├── router-instance.md │ │ │ ├── router-link.md │ │ │ └── router-view.md │ │ ├── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── getting-started.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── es/ │ │ ├── README.md │ │ ├── SUMMARY.md │ │ ├── advanced/ │ │ │ ├── data-fetching.md │ │ │ ├── lazy-loading.md │ │ │ ├── meta.md │ │ │ ├── navigation-guards.md │ │ │ ├── scroll-behavior.md │ │ │ └── transitions.md │ │ ├── api/ │ │ │ ├── component-injections.md │ │ │ ├── options.md │ │ │ ├── route-object.md │ │ │ ├── router-instance.md │ │ │ ├── router-link.md │ │ │ └── router-view.md │ │ ├── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── getting-started.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── fr/ │ │ ├── README.md │ │ ├── SUMMARY.md │ │ ├── advanced/ │ │ │ ├── data-fetching.md │ │ │ ├── lazy-loading.md │ │ │ ├── meta.md │ │ │ ├── navigation-guards.md │ │ │ ├── scroll-behavior.md │ │ │ └── transitions.md │ │ ├── api/ │ │ │ ├── component-injections.md │ │ │ ├── options.md │ │ │ ├── route-object.md │ │ │ ├── router-instance.md │ │ │ ├── router-link.md │ │ │ └── router-view.md │ │ ├── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── getting-started.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── ja/ │ │ ├── README.md │ │ ├── SUMMARY.md │ │ ├── advanced/ │ │ │ ├── data-fetching.md │ │ │ ├── lazy-loading.md │ │ │ ├── meta.md │ │ │ ├── navigation-guards.md │ │ │ ├── scroll-behavior.md │ │ │ └── transitions.md │ │ ├── api/ │ │ │ ├── component-injections.md │ │ │ ├── options.md │ │ │ ├── route-object.md │ │ │ ├── router-instance.md │ │ │ ├── router-link.md │ │ │ └── router-view.md │ │ ├── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── getting-started.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── kr/ │ │ ├── README.md │ │ ├── SUMMARY.md │ │ ├── advanced/ │ │ │ ├── data-fetching.md │ │ │ ├── lazy-loading.md │ │ │ ├── meta.md │ │ │ ├── navigation-guards.md │ │ │ ├── scroll-behavior.md │ │ │ └── transitions.md │ │ ├── api/ │ │ │ ├── component-injections.md │ │ │ ├── options.md │ │ │ ├── route-object.md │ │ │ ├── router-instance.md │ │ │ ├── router-link.md │ │ │ └── router-view.md │ │ ├── essentials/ │ │ │ ├── dynamic-matching.md │ │ │ ├── getting-started.md │ │ │ ├── history-mode.md │ │ │ ├── named-routes.md │ │ │ ├── named-views.md │ │ │ ├── navigation.md │ │ │ ├── nested-routes.md │ │ │ ├── passing-props.md │ │ │ └── redirect-and-alias.md │ │ └── installation.md │ ├── old/ │ │ ├── README.md │ │ └── SUMMARY.md │ └── ru/ │ ├── README.md │ ├── SUMMARY.md │ ├── advanced/ │ │ ├── data-fetching.md │ │ ├── lazy-loading.md │ │ ├── meta.md │ │ ├── navigation-guards.md │ │ ├── scroll-behavior.md │ │ └── transitions.md │ ├── api/ │ │ ├── component-injections.md │ │ ├── options.md │ │ ├── route-object.md │ │ ├── router-instance.md │ │ ├── router-link.md │ │ └── router-view.md │ ├── essentials/ │ │ ├── dynamic-matching.md │ │ ├── getting-started.md │ │ ├── history-mode.md │ │ ├── named-routes.md │ │ ├── named-views.md │ │ ├── navigation.md │ │ ├── nested-routes.md │ │ ├── passing-props.md │ │ └── redirect-and-alias.md │ └── installation.md ├── examples/ │ ├── active-links/ │ │ ├── app.js │ │ └── index.html │ ├── auth-flow/ │ │ ├── app.js │ │ ├── auth.js │ │ ├── components/ │ │ │ ├── About.vue │ │ │ ├── App.vue │ │ │ ├── Dashboard.vue │ │ │ └── Login.vue │ │ └── index.html │ ├── basic/ │ │ ├── app.js │ │ └── index.html │ ├── composables/ │ │ ├── app.js │ │ └── index.html │ ├── data-fetching/ │ │ ├── Post.vue │ │ ├── api.js │ │ ├── app.js │ │ └── index.html │ ├── discrete-components/ │ │ ├── app.js │ │ └── index.html │ ├── global.css │ ├── hash-mode/ │ │ ├── app.js │ │ └── index.html │ ├── hash-scroll-behavior/ │ │ ├── app.js │ │ └── index.html │ ├── index.html │ ├── keepalive-view/ │ │ ├── app.js │ │ └── index.html │ ├── lazy-loading/ │ │ ├── Bar.vue │ │ ├── Baz.vue │ │ ├── Foo.vue │ │ ├── app.js │ │ └── index.html │ ├── lazy-loading-before-mount/ │ │ ├── app.js │ │ └── index.html │ ├── multi-app/ │ │ ├── app.js │ │ └── index.html │ ├── named-routes/ │ │ ├── app.js │ │ └── index.html │ ├── named-views/ │ │ ├── app.js │ │ └── index.html │ ├── navigation-guards/ │ │ ├── app.js │ │ └── index.html │ ├── nested-router/ │ │ ├── app.js │ │ └── index.html │ ├── nested-routes/ │ │ ├── app.js │ │ └── index.html │ ├── redirect/ │ │ ├── app.js │ │ └── index.html │ ├── restart-app/ │ │ ├── app.js │ │ └── index.html │ ├── route-alias/ │ │ ├── app.js │ │ └── index.html │ ├── route-matching/ │ │ ├── app.js │ │ └── index.html │ ├── route-params/ │ │ ├── app.js │ │ └── index.html │ ├── route-props/ │ │ ├── Hello.vue │ │ ├── app.js │ │ └── index.html │ ├── router-errors/ │ │ ├── app.js │ │ └── index.html │ ├── scroll-behavior/ │ │ ├── app.js │ │ └── index.html │ ├── server.js │ ├── transitions/ │ │ ├── app.js │ │ └── index.html │ └── webpack.config.js ├── flow/ │ └── declarations.js ├── netlify.toml ├── package.json ├── scripts/ │ ├── release.sh │ └── verifyCommitMsg.js ├── src/ │ ├── components/ │ │ ├── link.js │ │ └── view.js │ ├── composables/ │ │ ├── globals.js │ │ ├── guards.js │ │ ├── index.js │ │ ├── useLink.js │ │ └── utils.js │ ├── create-matcher.js │ ├── create-route-map.js │ ├── entries/ │ │ ├── cjs.js │ │ └── esm.js │ ├── history/ │ │ ├── abstract.js │ │ ├── base.js │ │ ├── hash.js │ │ └── html5.js │ ├── index.js │ ├── install.js │ ├── router.js │ └── util/ │ ├── async.js │ ├── dom.js │ ├── errors.js │ ├── location.js │ ├── misc.js │ ├── params.js │ ├── path.js │ ├── push-state.js │ ├── query.js │ ├── resolve-components.js │ ├── route.js │ ├── scroll.js │ ├── state-key.js │ └── warn.js ├── test/ │ ├── .eslintrc │ ├── e2e/ │ │ ├── .eslintrc │ │ ├── browserstack-send-status.js │ │ ├── nightwatch.browserstack.js │ │ ├── nightwatch.config.js │ │ ├── runner.js │ │ └── specs/ │ │ ├── .prettierrc │ │ ├── active-links.js │ │ ├── auth-flow.js │ │ ├── basic.js │ │ ├── composables.js │ │ ├── data-fetching.js │ │ ├── hash-mode.js │ │ ├── hash-scroll-behavior.js │ │ ├── history-state.js │ │ ├── keepalive-view.js │ │ ├── lazy-loading-before-mount.js │ │ ├── lazy-loading.js │ │ ├── multi-app.js │ │ ├── named-routes.js │ │ ├── named-views.js │ │ ├── navigation-guards.js │ │ ├── nested-router.js │ │ ├── nested-routes.js │ │ ├── redirect.js │ │ ├── restart-app.js │ │ ├── route-alias.js │ │ ├── route-matching.js │ │ ├── route-params.js │ │ ├── route-props.js │ │ ├── scroll-behavior.js │ │ └── transitions.js │ └── unit/ │ ├── .eslintrc │ ├── jasmine.json │ └── specs/ │ ├── abstract-history.spec.js │ ├── api.spec.js │ ├── async.spec.js │ ├── create-map.spec.js │ ├── create-matcher.spec.js │ ├── custom-query.spec.js │ ├── discrete-components.spec.js │ ├── error-handling.spec.js │ ├── location.spec.js │ ├── node.spec.js │ ├── onReady.spec.js │ ├── path.spec.js │ ├── query.spec.js │ └── route.spec.js ├── types/ │ ├── composables.d.ts │ ├── index.d.ts │ ├── router.d.ts │ ├── test/ │ │ ├── index.ts │ │ ├── meta.ts │ │ └── tsconfig.json │ └── vue.d.ts └── vetur/ ├── attributes.json └── tags.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": ["env", "flow-vue"], "plugins": ["syntax-dynamic-import"] } ================================================ FILE: .circleci/config.yml ================================================ version: 2 defaults: &defaults working_directory: ~/project/vue-router docker: - image: circleci/node:lts-browsers jobs: install: <<: *defaults steps: - checkout - restore_cache: keys: - v1-vue-router-{{ .Branch }}-{{ checksum "yarn.lock" }} - v1-vue-router-{{ .Branch }}- - v1-vue-router- - run: yarn install - save_cache: key: v1-vue-router-{{ .Branch }}-{{ checksum "yarn.lock" }} paths: - node_modules/ - persist_to_workspace: root: ~/project paths: - vue-router lint-flow-types: <<: *defaults steps: - attach_workspace: at: ~/project - run: yarn run lint - run: yarn run flow - run: yarn run test:types test-unit: <<: *defaults steps: - attach_workspace: at: ~/project - run: yarn run test:unit # add codecov once it is actually ran # - run: # name: report coverage stats for non-PRs # command: | # if [[ -z $CI_PULL_REQUEST ]]; then # ./node_modules/.bin/codecov # fi test-e2e: <<: *defaults steps: - attach_workspace: at: ~/project - run: yarn run test:e2e test-e2e-bs-ie9: <<: *defaults steps: - attach_workspace: at: ~/project - run: yarn run test:e2e:ie9 workflows: version: 2 install-and-parallel-test: jobs: - install - test-unit: requires: - install - lint-flow-types: requires: - install - test-e2e: requires: - install - test-e2e-bs-ie9: requires: - install ================================================ FILE: .eslintignore ================================================ dist *.ts ================================================ FILE: .eslintrc ================================================ { "root": true, "plugins": [ "flowtype" ], "extends": [ "plugin:vue-libs/recommended", "plugin:flowtype/recommended" ] } ================================================ FILE: .flowconfig ================================================ [ignore] .*/node_modules/.* .*/test/.* .*/dist/.* .*/examples/.* .*/vue/.* [include] [libs] flow [options] #unsafe.enable_getters_and_setters=true suppress_comment= \\(.\\|\n\\)*\\$flow-disable-line ================================================ FILE: .github/ISSUE_TEMPLATE.md ================================================ ================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ ================================================ FILE: .github/funding.yml ================================================ github: [posva, yyx990803] open_collective: vuejs ================================================ FILE: .github/workflows/release-tag.yml ================================================ on: push: tags: - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10 name: Create Release jobs: build: name: Create Release runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@master - name: Create Release for Tag id: release_tag uses: yyx990803/release-tag@master env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ github.ref }} body: | Please refer to [CHANGELOG.md](https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md) for details. ================================================ FILE: .gitignore ================================================ .DS_Store node_modules TODOs.md test/e2e/reports test/e2e/screenshots selenium-debug.log dist/*.gz dist/*.map explorations docs/.vuepress/dist yarn-error.log .idea .vscode/settings.json .env selenium-server.log local.log browserstack.err ================================================ FILE: .prettierrc ================================================ { "semi": false, "singleQuote": true, "printWidth": 80 } ================================================ FILE: CHANGELOG.md ================================================ ## [3.6.5](https://github.com/vuejs/vue-router/compare/v3.6.4...v3.6.5) (2022-09-06) ### Bug Fixes - **types:** Component with 4 generics for Vue 2.6 ([d6064df](https://github.com/vuejs/vue-router/commit/d6064df1112497dac98e4302d81607efdb1a58c6)), closes [#3786](https://github.com/vuejs/vue-router/issues/3786) ## [3.6.4](https://github.com/vuejs/vue-router/compare/v3.6.3...v3.6.4) (2022-08-25) This release fixes some compatibility issues of the new `vue-router/composables` with webpack 4. ### Features - **types:** add composables.d.ts in root ([#3784](https://github.com/vuejs/vue-router/issues/3784)) ([0cf54de](https://github.com/vuejs/vue-router/commit/0cf54de782a0b05692bbe78a7181495b6a35b8d9)) ## [3.6.3](https://github.com/vuejs/vue-router/compare/v3.6.2...v3.6.3) (2022-08-23) ### Bug Fixes - **build:** export all named exports esm build ([a6647c8](https://github.com/vuejs/vue-router/commit/a6647c8c3d7022f1b702935461c7d234b052ca06)) - **types:** allow jsx components ([0cb86b3](https://github.com/vuejs/vue-router/commit/0cb86b3865b713201f9db49c7a8d23e9a2876f29)), closes [#3776](https://github.com/vuejs/vue-router/issues/3776) - **types:** missing NavigationFailureType and isNavigationFailure ([#3777](https://github.com/vuejs/vue-router/issues/3777)) ([9d001dd](https://github.com/vuejs/vue-router/commit/9d001dd0bebdea1e1a8ec2f0c77113b6a2e2b6a3)) ## [3.6.2](https://github.com/vuejs/vue-router/compare/v3.6.1...v3.6.2) (2022-08-23) ### Bug Fixes - **build:** add mjs build ([b4c3940](https://github.com/vuejs/vue-router/commit/b4c39404eff7ae2f657c405d7b0f939ce20cfdec)) - **types:** missing start location ([1356acb](https://github.com/vuejs/vue-router/commit/1356acb983c5eccb00c5c0ec3f406218ae49a8c1)) ## [3.6.1](https://github.com/vuejs/vue-router/compare/v3.6.0...v3.6.1) (2022-08-23) ### Bug Fixes - **build:** ensure install fn before Vue.use ([0126bcb](https://github.com/vuejs/vue-router/commit/0126bcbfb0e3cb824bfce05090ca018faf02ce5e)), closes [#3772](https://github.com/vuejs/vue-router/issues/3772) # [3.6.0](https://github.com/vuejs/vue-router/compare/v3.5.4...v3.6.0) (2022-08-22) This release of Vue Router introduces composables from Vue Router 4: ```js import { useRoute, useRouter, useLink, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router/composables' ``` Since these composables **require Vue 2.7**, they are only exposed under `vue-router/composables` submodule, so it shouldn't affect you if you stay on Vue 2.6 (Note there are no new features or fixes besides the composables in this release). Refer to [the Vue Router 4 API documentation](https://router.vuejs.org/api/#onbeforerouteleave) for details on the composables. ### Features - **types:** useLink() ([77bd0e3](https://github.com/vuejs/vue-router/commit/77bd0e317dd5a9aebfca515f0f28f3284c7d8260)) - useLink() ([50332e5](https://github.com/vuejs/vue-router/commit/50332e5e93e6aa1194a9e68a60937a6f9e8bcecd)) - **types:** expose RouterLink and RouterView in d.ts ([cad978a](https://github.com/vuejs/vue-router/commit/cad978a832174aac59cad86fe780f8a64a9754d7)) - add RouterLink and RouterView to esm ([4511f39](https://github.com/vuejs/vue-router/commit/4511f393334247c9702ed378220bf925cdc09add)) - add vue 2.7 types ([cba9650](https://github.com/vuejs/vue-router/commit/cba9650e5cbf958c1db9cd259a2e7bfbc28bddbe)) - onBeforeRouteUpdate onBeforeRouteLeave ([9861c55](https://github.com/vuejs/vue-router/commit/9861c553627f5f34a07ad3ac28e2ed02aab99d47)) - useRoute and useRouter ([ea35594](https://github.com/vuejs/vue-router/commit/ea355943e097914ae55fa54ccb7df929c901e80d)) ## [3.5.4](https://github.com/vuejs/vue-router/compare/v3.5.3...v3.5.4) (2022-05-16) ### Bug Fixes - remove whitespace between mulitple slashes ([86d7f1f](https://github.com/vuejs/vue-router/commit/86d7f1fdaa36432f6564309925690ec20bb2981e)), closes [#3743](https://github.com/vuejs/vue-router/issues/3743) ## [3.5.3](https://github.com/vuejs/vue-router/compare/v3.5.2...v3.5.3) (2021-10-26) ### Bug Fixes - clean more than two consecutive slashes ([#3652](https://github.com/vuejs/vue-router/issues/3652)) ([3e3a07e](https://github.com/vuejs/vue-router/commit/3e3a07ee6e7defd6cae75bddcede5a28b0092709)) - **scrollBehavior:** trigger scroll behavior if same route with hash ([#3592](https://github.com/vuejs/vue-router/issues/3592)) ([57d8042](https://github.com/vuejs/vue-router/commit/57d8042c8b99f92bfe35493b8ae9bba827864bf0)) ### Features - add constructor hint ([#3626](https://github.com/vuejs/vue-router/issues/3626)) ([28b769b](https://github.com/vuejs/vue-router/commit/28b769b2a07e3bf984c0ec20d6d797291a480e81)) ## [3.5.2](https://github.com/vuejs/vue-router/compare/v3.5.1...v3.5.2) (2021-06-21) ### Bug Fixes - **history:** stricter check of base in HTML5 ([#3556](https://github.com/vuejs/vue-router/issues/3556)) ([11dd184](https://github.com/vuejs/vue-router/commit/11dd184dc6a872c6399977fa4b7c259225ce4834)) - **types:** added missing router.match ([#3554](https://github.com/vuejs/vue-router/issues/3554)) ([394a3b6](https://github.com/vuejs/vue-router/commit/394a3b6cce5e395ae4ccf3e2efb0c115d492978c)) ## [3.5.1](https://github.com/vuejs/vue-router/compare/v3.5.0...v3.5.1) (2021-01-26) ### Bug Fixes - **warn:** only warn if "tag" or "event" is used ([#3458](https://github.com/vuejs/vue-router/issues/3458)) ([b7a31b9](https://github.com/vuejs/vue-router/commit/b7a31b9)), closes [#3457](https://github.com/vuejs/vue-router/issues/3457) # [3.5.0](https://github.com/vuejs/vue-router/compare/v3.4.9...v3.5.0) (2021-01-25) ### Features - **link:** exact-path prop ([825328e](https://github.com/vuejs/vue-router/commit/825328e)), closes [#2040](https://github.com/vuejs/vue-router/issues/2040) - **warn:** warn deprecated addRoutes ([2e41445](https://github.com/vuejs/vue-router/commit/2e41445)) - expose START_LOCATION ([53b68dd](https://github.com/vuejs/vue-router/commit/53b68dd)), closes [#2718](https://github.com/vuejs/vue-router/issues/2718) - **link:** deprecate v-slot without custom prop ([ceeda4c](https://github.com/vuejs/vue-router/commit/ceeda4c)) - **link:** warn deprecated props ([d2cb951](https://github.com/vuejs/vue-router/commit/d2cb951)) - **router:** add getRoutes ([6bc30aa](https://github.com/vuejs/vue-router/commit/6bc30aa)) - **types:** add types for getRoutes addRoute ([fb9bb60](https://github.com/vuejs/vue-router/commit/fb9bb60)) - addRoute as nested route ([ca80c44](https://github.com/vuejs/vue-router/commit/ca80c44)), closes [#1156](https://github.com/vuejs/vue-router/issues/1156) ## [3.4.9](https://github.com/vuejs/vue-router/compare/v3.4.8...v3.4.9) (2020-11-05) ### Bug Fixes - **encoding:** decode params ([#3350](https://github.com/vuejs/vue-router/issues/3350)) ([63c749c](https://github.com/vuejs/vue-router/commit/63c749c)) ## [3.4.8](https://github.com/vuejs/vue-router/compare/v3.4.7...v3.4.8) (2020-10-26) ### Features - **scroll:** add behavior support on scrollBehavior ([#3351](https://github.com/vuejs/vue-router/issues/3351)) ([4e0b3e0](https://github.com/vuejs/vue-router/commit/4e0b3e0)) ## [3.4.7](https://github.com/vuejs/vue-router/compare/v3.4.6...v3.4.7) (2020-10-16) ### Bug Fixes - **matcher:** should try catch decode only ([1f32f03](https://github.com/vuejs/vue-router/commit/1f32f03)) - **query:** check existing keys ([4b926e3](https://github.com/vuejs/vue-router/commit/4b926e3)), closes [#3341](https://github.com/vuejs/vue-router/issues/3341) ## [3.4.6](https://github.com/vuejs/vue-router/compare/v3.4.5...v3.4.6) (2020-10-07) ### Bug Fixes - **encoding:** try catch decodes ([607ce2d](https://github.com/vuejs/vue-router/commit/607ce2d)) - **ssr:** memory leak in poll method ([#2875](https://github.com/vuejs/vue-router/issues/2875)) ([7693eb5](https://github.com/vuejs/vue-router/commit/7693eb5)) - remove duplicated decodeURIComponent ([#3323](https://github.com/vuejs/vue-router/issues/3323)) ([560d11d](https://github.com/vuejs/vue-router/commit/560d11d)) ## [3.4.5](https://github.com/vuejs/vue-router/compare/v3.4.4...v3.4.5) (2020-09-26) ### Bug Fixes - **history:** do not call onReady on initial redirection ([a1a290e](https://github.com/vuejs/vue-router/commit/a1a290e)), closes [#3331](https://github.com/vuejs/vue-router/issues/3331) ## [3.4.4](https://github.com/vuejs/vue-router/compare/v3.4.3...v3.4.4) (2020-09-24) ### Bug Fixes - **abstract:** call afterHooks with go ([4da7021](https://github.com/vuejs/vue-router/commit/4da7021)), closes [#3250](https://github.com/vuejs/vue-router/issues/3250) - **history:** mark redundant navigation as pending ([893d86b](https://github.com/vuejs/vue-router/commit/893d86b)), closes [#3133](https://github.com/vuejs/vue-router/issues/3133) - **types:** add missing NavigationFailure types ([fda7067](https://github.com/vuejs/vue-router/commit/fda7067)), closes [#3293](https://github.com/vuejs/vue-router/issues/3293) - **types:** fix VueRouter.NavigationFailureType ([ecc8e27](https://github.com/vuejs/vue-router/commit/ecc8e27)) ### Features - **history:** Reset history.current when all apps are destroyed ([#3298](https://github.com/vuejs/vue-router/issues/3298)) ([c69ff7b](https://github.com/vuejs/vue-router/commit/c69ff7b)) ## [3.4.3](https://github.com/vuejs/vue-router/compare/v3.4.2...v3.4.3) (2020-08-11) - Revert 4fbaa9f7880276e661227442ef5923131a589210: "fix: keep repeated params in query/hash relative locations" Closes #3289 ## [3.4.2](https://github.com/vuejs/vue-router/compare/v3.4.1...v3.4.2) (2020-08-07) ### Bug Fixes - **query:** leave object as is ([7b3328d](https://github.com/vuejs/vue-router/commit/7b3328d)), closes [#3282](https://github.com/vuejs/vue-router/issues/3282) - keep repeated params in query/hash relative locations ([4fbaa9f](https://github.com/vuejs/vue-router/commit/4fbaa9f)) ## [3.4.1](https://github.com/vuejs/vue-router/compare/v3.4.0...v3.4.1) (2020-08-06) ### Bug Fixes - **query:** remove undefined values ([b952573](https://github.com/vuejs/vue-router/commit/b952573)), closes [#3276](https://github.com/vuejs/vue-router/issues/3276) - **router:** properly check null and undefined in isSameRoute ([d6546d9](https://github.com/vuejs/vue-router/commit/d6546d9)) # [3.4.0](https://github.com/vuejs/vue-router/compare/v3.3.4...v3.4.0) (2020-08-05) ### Bug Fixes - **query:** cast query values to strings (fix [#2131](https://github.com/vuejs/vue-router/issues/2131)) ([#3232](https://github.com/vuejs/vue-router/issues/3232)) ([f0d9c2d](https://github.com/vuejs/vue-router/commit/f0d9c2d)) - **scroll:** run scrollBehavior on initial load (fix [#3196](https://github.com/vuejs/vue-router/issues/3196)) ([#3199](https://github.com/vuejs/vue-router/issues/3199)) ([84398ae](https://github.com/vuejs/vue-router/commit/84398ae)) - **types:** add missing `options` property type ([#3248](https://github.com/vuejs/vue-router/issues/3248)) ([83920c9](https://github.com/vuejs/vue-router/commit/83920c9)) ### Features - add vetur tags and attributes ([bf1e1bd](https://github.com/vuejs/vue-router/commit/bf1e1bd)) - **errors:** capture errors thrown in redirect callback in onError ([#3251](https://github.com/vuejs/vue-router/issues/3251)) ([40e4df7](https://github.com/vuejs/vue-router/commit/40e4df7)), closes [#3201](https://github.com/vuejs/vue-router/issues/3201) [#3201](https://github.com/vuejs/vue-router/issues/3201) [#3201](https://github.com/vuejs/vue-router/issues/3201) - **errors:** expose `isNavigationFailure` ([8d92dc0](https://github.com/vuejs/vue-router/commit/8d92dc0)) - **errors:** NavigationDuplicated name for backwards compatibility ([b854a20](https://github.com/vuejs/vue-router/commit/b854a20)) ## [3.3.4](https://github.com/vuejs/vue-router/compare/v3.3.3...v3.3.4) (2020-06-13) ### Bug Fixes - **matcher:** navigate to same as current location ([62598b9](https://github.com/vuejs/vue-router/commit/62598b9)), closes [#3216](https://github.com/vuejs/vue-router/issues/3216) - **types:** missing children ([c1df447](https://github.com/vuejs/vue-router/commit/c1df447)), closes [#3230](https://github.com/vuejs/vue-router/issues/3230) ## [3.3.3](https://github.com/vuejs/vue-router/compare/v3.3.2...v3.3.3) (2020-06-12) ### Bug Fixes - **history:** initial redirect call onReady's onSuccess ([4d484bf](https://github.com/vuejs/vue-router/commit/4d484bf)), closes [#3225](https://github.com/vuejs/vue-router/issues/3225) - update ja docs ([#3214](https://github.com/vuejs/vue-router/issues/3214)) ([c05f741](https://github.com/vuejs/vue-router/commit/c05f741)) ### Features - better wording for navigation redirected failure ([1f3aea6](https://github.com/vuejs/vue-router/commit/1f3aea6)) - **types:** RouterConfig for multiple components ([#3217](https://github.com/vuejs/vue-router/issues/3217)) ([#3218](https://github.com/vuejs/vue-router/issues/3218)) ([dab86c5](https://github.com/vuejs/vue-router/commit/dab86c5)) ## [3.3.2](https://github.com/vuejs/vue-router/compare/v3.3.1...v3.3.2) (2020-05-29) ### Bug Fixes - **errors:** NavigationCanceled with async components ([#3211](https://github.com/vuejs/vue-router/issues/3211)) ([be39ca3](https://github.com/vuejs/vue-router/commit/be39ca3)) - remove error.stack modification ([#3212](https://github.com/vuejs/vue-router/issues/3212)) ([a0075ed](https://github.com/vuejs/vue-router/commit/a0075ed)) ## [3.3.1](https://github.com/vuejs/vue-router/compare/v3.3.0...v3.3.1) (2020-05-27) ### Bug Fixes - **errors:** avoid unnecessary log of errors ([2c77247](https://github.com/vuejs/vue-router/commit/2c77247)) # [3.3.0](https://github.com/vuejs/vue-router/compare/v3.2.0...v3.3.0) (2020-05-27) ### Features - **errors:** create router errors ([#3047](https://github.com/vuejs/vue-router/issues/3047)) ([4c727f9](https://github.com/vuejs/vue-router/commit/4c727f9)) - **history:** Remove event listeners when all apps are destroyed. ([#3172](https://github.com/vuejs/vue-router/issues/3172)) ([4c81be8](https://github.com/vuejs/vue-router/commit/4c81be8)), closes [#3152](https://github.com/vuejs/vue-router/issues/3152) [#2341](https://github.com/vuejs/vue-router/issues/2341) - **url:** call afterEach hooks after url is ensured ([#2292](https://github.com/vuejs/vue-router/issues/2292)) ([1575a18](https://github.com/vuejs/vue-router/commit/1575a18)), closes [#2079](https://github.com/vuejs/vue-router/issues/2079) # [3.2.0](https://github.com/vuejs/vue-router/compare/v3.1.6...v3.2.0) (2020-05-19) ### Bug Fixes - **html5:** make base case insensitive ([04a2143](https://github.com/vuejs/vue-router/commit/04a2143)), closes [#2154](https://github.com/vuejs/vue-router/issues/2154) - check for pushState being a function ([bc41f67](https://github.com/vuejs/vue-router/commit/bc41f67)), closes [#3154](https://github.com/vuejs/vue-router/issues/3154) ### Features - **link:** add aria-current to active links (close [#2116](https://github.com/vuejs/vue-router/issues/2116)) ([#3073](https://github.com/vuejs/vue-router/issues/3073)) ([6ec0ee5](https://github.com/vuejs/vue-router/commit/6ec0ee5)) - **scroll:** use manual scrollRestoration with scrollBehavior ([#1814](https://github.com/vuejs/vue-router/issues/1814)) ([1261363](https://github.com/vuejs/vue-router/commit/1261363)) - **types:** NavigationGuardNext ([#2497](https://github.com/vuejs/vue-router/issues/2497)) ([d18c497](https://github.com/vuejs/vue-router/commit/d18c497)) ## [3.1.6](https://github.com/vuejs/vue-router/compare/v3.1.5...v3.1.6) (2020-02-26) ### Bug Fixes - preserve history state when reloading ([a4ec3e2](https://github.com/vuejs/vue-router/commit/a4ec3e2)) - **ts:** add null to Route.name ([#3117](https://github.com/vuejs/vue-router/issues/3117)) ([8f831f2](https://github.com/vuejs/vue-router/commit/8f831f2)) - correctly calculate `path` when `pathMatch` is empty string ([#3111](https://github.com/vuejs/vue-router/issues/3111)) ([38e6ccd](https://github.com/vuejs/vue-router/commit/38e6ccd)), closes [#3106](https://github.com/vuejs/vue-router/issues/3106) ## [3.1.5](https://github.com/vuejs/vue-router/compare/v3.1.4...v3.1.5) (2020-01-15) ### Bug Fixes - **view:** add passing props to inactive component ([#2773](https://github.com/vuejs/vue-router/issues/2773)) ([0fb1343](https://github.com/vuejs/vue-router/commit/0fb1343)), closes [#2301](https://github.com/vuejs/vue-router/issues/2301) - **view:** fix deeply nested keep-alive router-views displaying ([#2930](https://github.com/vuejs/vue-router/issues/2930)) ([0c2b1aa](https://github.com/vuejs/vue-router/commit/0c2b1aa)), closes [#2923](https://github.com/vuejs/vue-router/issues/2923) ## [3.1.4](https://github.com/vuejs/vue-router/compare/v3.1.3...v3.1.4) (2020-01-14) ### Bug Fixes - suppress warning if `pathMatch` is empty ([#3081](https://github.com/vuejs/vue-router/issues/3081)) ([ddc6bc7](https://github.com/vuejs/vue-router/commit/ddc6bc7)), closes [#3072](https://github.com/vuejs/vue-router/issues/3072) - **link:** correctly warn wrong v-slot usage ([a150291](https://github.com/vuejs/vue-router/commit/a150291)), closes [#3091](https://github.com/vuejs/vue-router/issues/3091) - **location:** add a copy for params with named locations ([#2802](https://github.com/vuejs/vue-router/issues/2802)) ([2b39f5a](https://github.com/vuejs/vue-router/commit/2b39f5a)), closes [#2800](https://github.com/vuejs/vue-router/issues/2800) [#2938](https://github.com/vuejs/vue-router/issues/2938) [#2938](https://github.com/vuejs/vue-router/issues/2938) ### Features - **history:** preserve existing history.state ([c0d3376](https://github.com/vuejs/vue-router/commit/c0d3376)), closes [#3006](https://github.com/vuejs/vue-router/issues/3006) ## [3.1.3](https://github.com/vuejs/vue-router/compare/v3.1.2...v3.1.3) (2019-08-30) ### Bug Fixes - **link:** merge event listeners when provided in an anchor ([e0d4dc4](https://github.com/vuejs/vue-router/commit/e0d4dc4)), closes [#2890](https://github.com/vuejs/vue-router/issues/2890) ### Features - **errors:** add stack trace to NavigationDuplicated ([5ef5d73](https://github.com/vuejs/vue-router/commit/5ef5d73)), closes [#2881](https://github.com/vuejs/vue-router/issues/2881) - warn about root paths without a leading slash ([#2591](https://github.com/vuejs/vue-router/issues/2591)) ([7d7e048](https://github.com/vuejs/vue-router/commit/7d7e048)), closes [#2550](https://github.com/vuejs/vue-router/issues/2550) [#2550](https://github.com/vuejs/vue-router/issues/2550) ## [3.1.2](https://github.com/vuejs/vue-router/compare/v3.1.1...v3.1.2) (2019-08-08) ### Bug Fixes - **types:** prioritize promise based push/replace ([1243e8b](https://github.com/vuejs/vue-router/commit/1243e8b)) ### Reverts - "fix(hash): correctly place query if placed before hash ([#2851](https://github.com/vuejs/vue-router/issues/2851))" ([9b30e4c](https://github.com/vuejs/vue-router/commit/9b30e4c)), closes [#2876](https://github.com/vuejs/vue-router/issues/2876). See more information at https://github.com/vuejs/vue-router/issues/2125#issuecomment-519521424 ## [3.1.1](https://github.com/vuejs/vue-router/compare/v3.1.0...v3.1.1) (2019-08-06) ### Bug Fixes - **link:** silence back navigations errors ([59b6da3](https://github.com/vuejs/vue-router/commit/59b6da3)) # [3.1.0](https://github.com/vuejs/vue-router/compare/v3.0.7...v3.1.0) (2019-08-06) ### Bug Fixes - **abstract history:** allow router.back in abstract mode when 2 consecutive same routes appear in history stack ([#2771](https://github.com/vuejs/vue-router/issues/2771)) ([8910979](https://github.com/vuejs/vue-router/commit/8910979)), closes [#2607](https://github.com/vuejs/vue-router/issues/2607) - **hash:** correctly place query if placed before hash ([#2851](https://github.com/vuejs/vue-router/issues/2851)) ([b7715dc](https://github.com/vuejs/vue-router/commit/b7715dc)), closes [#2125](https://github.com/vuejs/vue-router/issues/2125) [#2262](https://github.com/vuejs/vue-router/issues/2262) - **link:** Fix active links when parent link redirects to child ([#2772](https://github.com/vuejs/vue-router/issues/2772)) ([64785a9](https://github.com/vuejs/vue-router/commit/64785a9)), closes [#2724](https://github.com/vuejs/vue-router/issues/2724) - adapt error to work on IE9 ([527d6d5](https://github.com/vuejs/vue-router/commit/527d6d5)) ### Features - **alias:** warn against redundant aliases ([04a02c0](https://github.com/vuejs/vue-router/commit/04a02c0)), closes [#2461](https://github.com/vuejs/vue-router/issues/2461) [#2462](https://github.com/vuejs/vue-router/issues/2462) - **scroll:** handle id selectors starting with a number ([799ceca](https://github.com/vuejs/vue-router/commit/799ceca)), closes [#2163](https://github.com/vuejs/vue-router/issues/2163) - return a promise with push and replace ([#2862](https://github.com/vuejs/vue-router/issues/2862)) ([d907a13](https://github.com/vuejs/vue-router/commit/d907a13)), closes [#1769](https://github.com/vuejs/vue-router/issues/1769) [#1769](https://github.com/vuejs/vue-router/issues/1769) - scoped slot for link ([e289dde](https://github.com/vuejs/vue-router/commit/e289dde)) - warn the user for invalid uses of v-slot with Link ([44c63a9](https://github.com/vuejs/vue-router/commit/44c63a9)) ## [3.0.7](https://github.com/vuejs/vue-router/compare/v3.0.6...v3.0.7) (2019-07-03) ### Bug Fixes - apps loaded from Windows file shares not mapped to network drives ([#2774](https://github.com/vuejs/vue-router/issues/2774)) ([c2c78a3](https://github.com/vuejs/vue-router/commit/c2c78a3)) - make callback of next in beforeRouterEnter more consistent ([#2738](https://github.com/vuejs/vue-router/issues/2738)) ([8ac478f](https://github.com/vuejs/vue-router/commit/8ac478f)), closes [#2761](https://github.com/vuejs/vue-router/issues/2761) [#2728](https://github.com/vuejs/vue-router/issues/2728) ## [3.0.6](https://github.com/vuejs/vue-router/compare/v3.0.5...v3.0.6) (2019-04-17) ### Bug Fixes - revert [#2713](https://github.com/vuejs/vue-router/issues/2713) ([#2723](https://github.com/vuejs/vue-router/issues/2723)) ([ec6eab7](https://github.com/vuejs/vue-router/commit/ec6eab7)), closes [#2719](https://github.com/vuejs/vue-router/issues/2719) ## [3.0.5](https://github.com/vuejs/vue-router/compare/v3.0.4...v3.0.5) (2019-04-15) ### Bug Fixes - push before creating Vue instance ([#2713](https://github.com/vuejs/vue-router/issues/2713)) ([6974a6f](https://github.com/vuejs/vue-router/commit/6974a6f)), closes [#2712](https://github.com/vuejs/vue-router/issues/2712) - **router-view:** add condition to see whether the tree is inactive (fix [#2552](https://github.com/vuejs/vue-router/issues/2552)) ([#2592](https://github.com/vuejs/vue-router/issues/2592)) ([e6d8fd2](https://github.com/vuejs/vue-router/commit/e6d8fd2)) - **router-view:** register instance in init hook ([c3abdf6](https://github.com/vuejs/vue-router/commit/c3abdf6)), closes [#2561](https://github.com/vuejs/vue-router/issues/2561) [#2689](https://github.com/vuejs/vue-router/issues/2689) [#2561](https://github.com/vuejs/vue-router/issues/2561) [#2561](https://github.com/vuejs/vue-router/issues/2561) ## [3.0.4](https://github.com/vuejs/vue-router/compare/v3.0.3...v3.0.4) (2019-04-12) ### Bug Fixes - prevent memory leaks by removing app references ([#2706](https://github.com/vuejs/vue-router/issues/2706)) ([8056105](https://github.com/vuejs/vue-router/commit/8056105)), closes [#2639](https://github.com/vuejs/vue-router/issues/2639) - **hash:** prevent double decoding ([#2711](https://github.com/vuejs/vue-router/issues/2711)) ([a775fb1](https://github.com/vuejs/vue-router/commit/a775fb1)), closes [#2708](https://github.com/vuejs/vue-router/issues/2708) ### Features - **esm build:** build ES modules for browser ([#2705](https://github.com/vuejs/vue-router/issues/2705)) ([627027f](https://github.com/vuejs/vue-router/commit/627027f)) ## [3.0.3](https://github.com/vuejs/vue-router/compare/v3.0.2...v3.0.3) (2019-04-08) ### Bug Fixes - removes warning resolving asterisk routes ([e224637](https://github.com/vuejs/vue-router/commit/e224637)), closes [#2505](https://github.com/vuejs/vue-router/issues/2505) [#2505](https://github.com/vuejs/vue-router/issues/2505) - **normalizeLocation:** create a copy with named locations ([#2286](https://github.com/vuejs/vue-router/issues/2286)) ([53cce99](https://github.com/vuejs/vue-router/commit/53cce99)), closes [#2121](https://github.com/vuejs/vue-router/issues/2121) - **resolve:** use current location if not provided ([#2390](https://github.com/vuejs/vue-router/issues/2390)) ([7ff4de4](https://github.com/vuejs/vue-router/commit/7ff4de4)), closes [#2385](https://github.com/vuejs/vue-router/issues/2385) - **types:** allow null/undefined in query params ([ca30a75](https://github.com/vuejs/vue-router/commit/ca30a75)), closes [#2605](https://github.com/vuejs/vue-router/issues/2605) ## [3.0.2](https://github.com/vuejs/vue-router/compare/v3.0.1...v3.0.2) (2018-11-23) ### Bug Fixes - **errors:** throws with invalid route objects ([#1893](https://github.com/vuejs/vue-router/issues/1893)) ([c837666](https://github.com/vuejs/vue-router/commit/c837666)) - fix the test in async.spec.js ([#1953](https://github.com/vuejs/vue-router/issues/1953)) ([4e9e66b](https://github.com/vuejs/vue-router/commit/4e9e66b)) - initial url path for non ascii urls ([#2375](https://github.com/vuejs/vue-router/issues/2375)) ([c3b0a33](https://github.com/vuejs/vue-router/commit/c3b0a33)) - only setupScroll when support pushState due to possible fallback: false ([#1835](https://github.com/vuejs/vue-router/issues/1835)) ([fac60f6](https://github.com/vuejs/vue-router/commit/fac60f6)), closes [#1834](https://github.com/vuejs/vue-router/issues/1834) - workaround replaceState bug in Safari ([#2295](https://github.com/vuejs/vue-router/issues/2295)) ([3c7d8ab](https://github.com/vuejs/vue-router/commit/3c7d8ab)), closes [#2195](https://github.com/vuejs/vue-router/issues/2195) - **hash:** support unicode in initial route ([8369c6b](https://github.com/vuejs/vue-router/commit/8369c6b)) - **history-mode:** correcting indentation in web.config example ([#1948](https://github.com/vuejs/vue-router/issues/1948)) ([4b071f9](https://github.com/vuejs/vue-router/commit/4b071f9)) - **match:** use pathMatch for the param of \* routes ([#1995](https://github.com/vuejs/vue-router/issues/1995)) ([ca1fccd](https://github.com/vuejs/vue-router/commit/ca1fccd)), closes [#1994](https://github.com/vuejs/vue-router/issues/1994) ### Features - call scrollBehavior with app context ([#1804](https://github.com/vuejs/vue-router/issues/1804)) ([c93a734](https://github.com/vuejs/vue-router/commit/c93a734)) ## [3.0.1](https://github.com/vuejs/vue-router/compare/v3.0.0...v3.0.1) (2017-10-13) ### Bug Fixes - fix props-passing regression ([02ff792](https://github.com/vuejs/vue-router/commit/02ff792)), closes [#1800](https://github.com/vuejs/vue-router/issues/1800) ## [3.0.0](https://github.com/vuejs/vue-router/compare/v2.8.0...v3.0.0) (2017-10-11) ### Features - **typings:** adapt to the new Vue typings ([#1685](https://github.com/vuejs/vue-router/issues/1685)) ([8855e36](https://github.com/vuejs/vue-router/commit/8855e36)) ### BREAKING CHANGES - **typings:** It is no longer compatible with the old Vue typings ## [2.8.0](https://github.com/vuejs/vue-router/compare/v2.7.0...v2.8.0) (2017-10-11) ### Bug Fixes - allow insllation on extended Vue copies ([f62c5d6](https://github.com/vuejs/vue-router/commit/f62c5d6)) - avoid first popstate event with async guard together (fix [#1508](https://github.com/vuejs/vue-router/issues/1508)) ([#1661](https://github.com/vuejs/vue-router/issues/1661)) ([3cbc0f3](https://github.com/vuejs/vue-router/commit/3cbc0f3)) - deep clone query when creating routes ([effb114](https://github.com/vuejs/vue-router/commit/effb114)), closes [#1690](https://github.com/vuejs/vue-router/issues/1690) - fix scroll when going back to initial route ([#1586](https://github.com/vuejs/vue-router/issues/1586)) ([c166822](https://github.com/vuejs/vue-router/commit/c166822)) - handle null values when comparing objects ([#1568](https://github.com/vuejs/vue-router/issues/1568)) ([4e95bd8](https://github.com/vuejs/vue-router/commit/4e95bd8)), closes [#1566](https://github.com/vuejs/vue-router/issues/1566) - resolve native ES modules ([8a28426](https://github.com/vuejs/vue-router/commit/8a28426)) - send props not defined on the route component in \$attrs. Fixes [#1695](https://github.com/vuejs/vue-router/issues/1695). ([#1702](https://github.com/vuejs/vue-router/issues/1702)) ([a722b6a](https://github.com/vuejs/vue-router/commit/a722b6a)) ### Features - enhance hashHistory to support scrollBehavior ([#1662](https://github.com/vuejs/vue-router/issues/1662)) ([1422eb5](https://github.com/vuejs/vue-router/commit/1422eb5)) - scrollBehavior accept returning a promise ([#1758](https://github.com/vuejs/vue-router/issues/1758)) ([ce13b55](https://github.com/vuejs/vue-router/commit/ce13b55)) # [2.7.0](https://github.com/vuejs/vue-router/compare/v2.6.0...v2.7.0) (2017-06-29) ### Features - auto resolve ES module default when resolving async components ([d539788](https://github.com/vuejs/vue-router/commit/d539788)) ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2013-present Evan You Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # vue-router [![Build Status](https://img.shields.io/circleci/project/github/vuejs/vue-router/dev.svg)](https://circleci.com/gh/vuejs/vue-router) > This is vue-router 3.0 which works only with Vue 2.0. and both have reached end of life. > > - For the 1.x router see the [1.0 branch](https://github.com/vuejs/vue-router/tree/1.0). > - For Vue Router 4 (for Vue 3) see [vuejs/router](https://github.com/vuejs/router).

Supporting Vue Router

Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source project with its ongoing development made possible entirely by the support of Sponsors. If you would like to become a sponsor, please consider: - [Become a Sponsor on GitHub](https://github.com/sponsors/posva) - [One-time donation via PayPal](https://paypal.me/posva)

Gold Sponsors

VueJobs

Silver Sponsors

VueMastery Prefect

Bronze Sponsors

Stanislas Ormières Antony Konstantinidis Storyblok NuxtJS

--- Get started with the [documentation](http://v3.router.vuejs.org), or play with the [examples](https://github.com/vuejs/vue-router/tree/dev/examples) (see how to run them below). ### Development Setup ```bash # install deps yarn # build dist files yarn build # serve examples at localhost:8080 yarn dev # lint & run all tests yarn test # serve docs at localhost:8080 yarn docs ``` ## Releasing - `yarn run release` - Ensure tests are passing `yarn run test` - Build dist files `VERSION= yarn run build` - Build changelog `yarn run changelog` - Commit dist files `git add dist CHANGELOG.md && git commit -m "[build $VERSION]"` - Publish a new version `npm version $VERSION --message "[release] $VERSION" - Push tags `git push origin refs/tags/v$VERSION && git push` - Publish to npm `npm publish` ## Questions For questions and support please use the [Discord chat server](https://chat.vuejs.org) or [the official forum](http://forum.vuejs.org). The issue list of this repo is **exclusively** for bug reports and feature requests. ## Issues Please make sure to read the [Issue Reporting Checklist](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately. ## Contribution Please make sure to read the [Contributing Guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md) before making a pull request. ## Changelog Details changes for each release are documented in the [`CHANGELOG.md file`](https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md). ## Stay In Touch - For latest releases and announcements, follow on Twitter: [@vuejs](https://twitter.com/vuejs) ## License [MIT](http://opensource.org/licenses/MIT) Copyright (c) 2013-present Evan You ## Special Thanks BrowserStack Logo Special thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser specific issues. ================================================ FILE: build/build.js ================================================ const fs = require('fs') const path = require('path') const zlib = require('zlib') const terser = require('terser') const rollup = require('rollup') const configs = require('./configs') if (!fs.existsSync('dist')) { fs.mkdirSync('dist') } build(configs) function build (builds) { let built = 0 const total = builds.length const next = () => { buildEntry(builds[built]) .then(() => { built++ if (built < total) { next() } }) .catch(logError) } next() } function buildEntry ({ input, output }) { const { file, banner } = output const isProd = /min\.js$/.test(file) return rollup .rollup(input) .then(bundle => bundle.generate(output)) .then(bundle => { // console.log(bundle) const code = bundle.output[0].code if (isProd) { const minified = (banner ? banner + '\n' : '') + terser.minify(code, { toplevel: true, output: { ascii_only: true }, compress: { pure_funcs: ['makeMap'] } }).code return write(file, minified, true) } else { return write(file, code) } }) } function write (dest, code, zip) { return new Promise((resolve, reject) => { function report (extra) { console.log( blue(path.relative(process.cwd(), dest)) + ' ' + getSize(code) + (extra || '') ) resolve() } fs.writeFile(dest, code, err => { if (err) return reject(err) if (zip) { zlib.gzip(code, (err, zipped) => { if (err) return reject(err) report(' (gzipped: ' + getSize(zipped) + ')') }) } else { report() } }) }) } function getSize (code) { return (code.length / 1024).toFixed(2) + 'kb' } function logError (e) { console.log(e) } function blue (str) { return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m' } ================================================ FILE: build/configs.js ================================================ const path = require('path') const buble = require('rollup-plugin-buble') const flow = require('rollup-plugin-flow-no-whitespace') const cjs = require('@rollup/plugin-commonjs') const node = require('@rollup/plugin-node-resolve').nodeResolve const replace = require('rollup-plugin-replace') const version = process.env.VERSION || require('../package.json').version const banner = `/*! * vue-router v${version} * (c) ${new Date().getFullYear()} Evan You * @license MIT */` const resolve = _path => path.resolve(__dirname, '../', _path) module.exports = [ // browser dev { file: resolve('dist/vue-router.js'), format: 'umd', env: 'development' }, { file: resolve('dist/vue-router.min.js'), format: 'umd', env: 'production' }, { file: resolve('dist/vue-router.common.js'), format: 'cjs' }, { input: resolve('src/entries/esm.js'), file: resolve('dist/vue-router.esm.js'), format: 'es' }, { input: resolve('src/entries/esm.js'), file: resolve('dist/vue-router.mjs'), format: 'es' }, { input: resolve('src/entries/esm.js'), file: resolve('dist/vue-router.esm.browser.js'), format: 'es', env: 'development', transpile: false }, { input: resolve('src/entries/esm.js'), file: resolve('dist/vue-router.esm.browser.min.js'), format: 'es', env: 'production', transpile: false }, { input: resolve('src/composables/index.js'), file: resolve('./composables.mjs'), format: 'es' }, { input: resolve('src/composables/index.js'), file: resolve('./composables.js'), format: 'cjs' } ].map(genConfig) function genConfig (opts) { const config = { input: { input: opts.input || resolve('src/index.js'), plugins: [ flow(), node(), cjs(), replace({ __VERSION__: version }) ], external: ['vue'] }, output: { file: opts.file, format: opts.format, banner, name: 'VueRouter' } } if (opts.env) { config.input.plugins.unshift( replace({ 'process.env.NODE_ENV': JSON.stringify(opts.env) }) ) } if (opts.transpile !== false) { config.input.plugins.push(buble()) } return config } ================================================ FILE: build/rollup.dev.config.js ================================================ const { input, output } = require('./configs')[0] module.exports = Object.assign({}, input, { output }) ================================================ FILE: composables.d.ts ================================================ export * from './types/composables' ================================================ FILE: composables.js ================================================ /*! * vue-router v3.6.5 * (c) 2022 Evan You * @license MIT */ 'use strict' Object.defineProperty(exports, '__esModule', { value: true }) var vue = require('vue') // dev only warn if no current instance function throwNoCurrentInstance (method) { if (!vue.getCurrentInstance()) { throw new Error( ('[vue-router]: Missing current instance. ' + method + '() must be called inside ================================================ FILE: docs/.vuepress/components/HomeSponsorsGroup.vue ================================================ ================================================ FILE: docs/.vuepress/components/sponsors.json ================================================ { "platinum": [], "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.prefect.io/", "imgSrcLight": "https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg", "imgSrcDark": "https://posva-sponsors.pages.dev/logos/prefectlogo-dark.svg", "alt": "Prefect" } ], "bronze": [ { "alt": "Stanislas Ormières", "href": "https://stormier.ninja", "imgSrcDark": "https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4", "imgSrcLight": "https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" }, { "alt": "Antony Konstantinidis", "href": "https://www.vuejs.de", "imgSrcDark": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4", "imgSrcLight": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" }, { "href": "https://storyblok.com", "imgSrcLight": "https://posva-sponsors.pages.dev/logos/storyblok.png", "imgSrcDark": "https://posva-sponsors.pages.dev/logos/storyblok.png", "alt": "Storyblok" }, { "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" } ] } ================================================ FILE: docs/.vuepress/config.js ================================================ module.exports = ctx => ({ locales: { '/': { lang: 'en-US', title: 'Vue Router', description: 'The official router for Vue.js.' }, '/zh/': { lang: 'zh-CN', title: 'Vue Router', description: 'Vue.js 官方的路由管理器。' }, '/ja/': { lang: 'ja', title: 'Vue Router', description: 'Vue.js の公式ルータ' }, '/ru/': { lang: 'ru', title: 'Vue Router', description: 'Официальный маршрутизатор для Vue.js.' }, '/kr/': { lang: 'kr', title: 'Vue Router', description: 'Vue.js 공식 라우터' }, '/fr/': { lang: 'fr', title: 'Vue Router', description: 'Routeur officiel pour Vue.Js' } }, head: [ ['link', { rel: 'icon', href: `/logo.png` }], [ 'meta', { name: 'wwads-cn-verify', content: '7e7757b1e12abcb736ab9a754ffb617a' } ], [ 'link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` } ], [ 'link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' } ], [ 'meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' } ] ], // theme: '@vuepress/vue', plugins: [ [ '@vuepress/pwa', { serviceWorker: true, updatePopup: true } ] ], themeConfig: { algolia: ctx.isProd ? { appId: 'LI3RW4C4QI', apiKey: '08e7ef7cd3969442874f0dee9dec34be', indexName: 'vue-router' } : null, carbonAds: { carbon: 'CEBICK3I', custom: 'CEBICK3M', placement: 'routervuejsorg' }, repo: 'vuejs/vue-router', docsDir: 'docs', smoothScroll: true, locales: { '/': { label: 'English', selectText: 'Languages', editLinkText: 'Edit this page on GitHub', nav: [ { text: 'Guide', link: '/guide/' }, { text: 'API Reference', link: '/api/' }, { text: 'v3.x', items: [{ text: 'v4.x', link: 'https://next.router.vuejs.org' }] }, { text: 'Release Notes', link: 'https://github.com/vuejs/vue-router/releases' } ], sidebar: [ '/installation.md', { title: 'Essentials', collapsable: false, children: [ '/guide/', '/guide/essentials/dynamic-matching.md', '/guide/essentials/nested-routes.md', '/guide/essentials/navigation.md', '/guide/essentials/named-routes.md', '/guide/essentials/named-views.md', '/guide/essentials/redirect-and-alias.md', '/guide/essentials/passing-props.md', '/guide/essentials/history-mode.md' ] }, { title: 'Advanced', collapsable: false, children: [ '/guide/advanced/navigation-guards.md', '/guide/advanced/meta.md', '/guide/advanced/transitions.md', '/guide/advanced/data-fetching.md', '/guide/advanced/scroll-behavior.md', '/guide/advanced/lazy-loading.md', '/guide/advanced/navigation-failures.md' ] } ] }, '/zh/': { label: '简体中文', selectText: '选择语言', editLinkText: '在 GitHub 上编辑此页', nav: [ { text: '指南', link: '/zh/guide/' }, { text: 'API 参考', link: '/zh/api/' }, { text: 'v3.x', items: [{ text: 'v4.x', link: 'https://next.router.vuejs.org/zh/' }] }, { text: '更新记录', link: 'https://github.com/vuejs/vue-router/releases' } ], sidebar: [ '/zh/installation.md', { title: '基础', collapsable: false, children: [ '/zh/guide/', '/zh/guide/essentials/dynamic-matching.md', '/zh/guide/essentials/nested-routes.md', '/zh/guide/essentials/navigation.md', '/zh/guide/essentials/named-routes.md', '/zh/guide/essentials/named-views.md', '/zh/guide/essentials/redirect-and-alias.md', '/zh/guide/essentials/passing-props.md', '/zh/guide/essentials/history-mode.md' ] }, { title: '进阶', collapsable: false, children: [ '/zh/guide/advanced/navigation-guards.md', '/zh/guide/advanced/meta.md', '/zh/guide/advanced/transitions.md', '/zh/guide/advanced/data-fetching.md', '/zh/guide/advanced/scroll-behavior.md', '/zh/guide/advanced/lazy-loading.md', '/zh/guide/advanced/navigation-failures.md' ] } ] }, '/ja/': { label: '日本語', selectText: '言語', editLinkText: 'GitHub 上でこのページを編集する', nav: [ { text: 'ガイド', link: '/ja/guide/' }, { text: 'API リファレンス', link: '/ja/api/' }, { text: 'v3.x', items: [{ text: 'v4.x', link: 'https://next.router.vuejs.org' }] }, { text: 'リリースノート', link: 'https://github.com/vuejs/vue-router/releases' } ], sidebar: [ '/ja/installation.md', { title: '基本的な使い方', collapsable: false, children: [ '/ja/guide/', '/ja/guide/essentials/dynamic-matching.md', '/ja/guide/essentials/nested-routes.md', '/ja/guide/essentials/navigation.md', '/ja/guide/essentials/named-routes.md', '/ja/guide/essentials/named-views.md', '/ja/guide/essentials/redirect-and-alias.md', '/ja/guide/essentials/passing-props.md', '/ja/guide/essentials/history-mode.md' ] }, { title: '高度な使い方', collapsable: false, children: [ '/ja/guide/advanced/navigation-guards.md', '/ja/guide/advanced/meta.md', '/ja/guide/advanced/transitions.md', '/ja/guide/advanced/data-fetching.md', '/ja/guide/advanced/scroll-behavior.md', '/ja/guide/advanced/lazy-loading.md', '/ja/guide/advanced/navigation-failures.md' ] } ] }, '/ru/': { label: 'Русский', selectText: 'Переводы', editLinkText: 'Изменить эту страницу на GitHub', nav: [ { text: 'Руководство', link: '/ru/guide/' }, { text: 'Справочник API', link: '/ru/api/' }, { text: 'v3.x', items: [{ text: 'v4.x', link: 'https://next.router.vuejs.org' }] }, { text: 'История изменений', link: 'https://github.com/vuejs/vue-router/releases' } ], sidebar: [ '/ru/installation.md', { title: 'Основы', collapsable: false, children: [ '/ru/guide/', '/ru/guide/essentials/dynamic-matching.md', '/ru/guide/essentials/nested-routes.md', '/ru/guide/essentials/navigation.md', '/ru/guide/essentials/named-routes.md', '/ru/guide/essentials/named-views.md', '/ru/guide/essentials/redirect-and-alias.md', '/ru/guide/essentials/passing-props.md', '/ru/guide/essentials/history-mode.md' ] }, { title: 'Продвинутые темы', collapsable: false, children: [ '/ru/guide/advanced/navigation-guards.md', '/ru/guide/advanced/meta.md', '/ru/guide/advanced/transitions.md', '/ru/guide/advanced/data-fetching.md', '/ru/guide/advanced/scroll-behavior.md', '/ru/guide/advanced/lazy-loading.md', '/ru/guide/advanced/navigation-failures.md' ] } ] }, '/kr/': { label: '한국어', selectText: '언어', editLinkText: 'GitHub에서 이 문서를 수정하세요', nav: [ { text: '가이드', link: '/kr/guide/' }, { text: 'API 레퍼런스', link: '/kr/api/' }, { text: 'v3.x', items: [{ text: 'v4.x', link: 'https://next.router.vuejs.org' }] }, { text: '릴리즈 노트', link: 'https://github.com/vuejs/vue-router/releases' } ], sidebar: [ '/kr/installation.md', { title: '기본 사용법', collapsable: false, children: [ '/kr/guide/', '/kr/guide/essentials/dynamic-matching.md', '/kr/guide/essentials/nested-routes.md', '/kr/guide/essentials/navigation.md', '/kr/guide/essentials/named-routes.md', '/kr/guide/essentials/named-views.md', '/kr/guide/essentials/redirect-and-alias.md', '/kr/guide/essentials/passing-props.md', '/kr/guide/essentials/history-mode.md' ] }, { title: '고급 사용법', collapsable: false, children: [ '/kr/guide/advanced/navigation-guards.md', '/kr/guide/advanced/meta.md', '/kr/guide/advanced/transitions.md', '/kr/guide/advanced/data-fetching.md', '/kr/guide/advanced/scroll-behavior.md', '/kr/guide/advanced/lazy-loading.md' ] } ] }, '/fr/': { label: 'Français', selectText: 'Langues', editLinkText: 'Editer cette page sur Github', nav: [ { text: 'Guide', link: '/fr/guide/' }, { text: 'API', link: '/fr/api/' }, { text: 'v3.x', items: [{ text: 'v4.x', link: 'https://next.router.vuejs.org' }] }, { text: 'Notes de version', link: 'https://github.com/vuejs/vue-router/releases' } ], sidebar: [ '/fr/installation.md', { title: 'Essentiels', collapsable: false, children: [ '/fr/guide/', '/fr/guide/essentials/dynamic-matching.md', '/fr/guide/essentials/nested-routes.md', '/fr/guide/essentials/navigation.md', '/fr/guide/essentials/named-routes.md', '/fr/guide/essentials/named-views.md', '/fr/guide/essentials/redirect-and-alias.md', '/fr/guide/essentials/passing-props.md', '/fr/guide/essentials/history-mode.md' ] }, { title: 'Avancés', collapsable: false, children: [ '/fr/guide/advanced/navigation-guards.md', '/fr/guide/advanced/meta.md', '/fr/guide/advanced/transitions.md', '/fr/guide/advanced/data-fetching.md', '/fr/guide/advanced/scroll-behavior.md', '/fr/guide/advanced/lazy-loading.md' ] } ] } } } }) ================================================ FILE: docs/.vuepress/public/_redirects ================================================ # redirect old urls to root /en/essentials/getting-started.html /guide/ /en/essentials/* /guide/essentials/:splat /en/advanced/* /guide/advanced/:splat /en/api/* /api/ /en/* /:splat /zh-cn/essentials/getting-started.html /zh/guide/ /zh-cn/essentials/* /zh/guide/essentials/:splat /zh-cn/advanced/* /zh/guide/advanced/:splat /zh-cn/api/* /zh/api/ /zh-cn/* /zh/:splat /ru/essentials/getting-started.html /ru/guide/ /ru/essentials/* /ru/guide/essentials/:splat /ru/advanced/* /ru/guide/advanced/:splat /ru/api/* /ru/api/ /ru/* /ru/:splat /ja/essentials/getting-started.html /ja/guide/ /ja/essentials/* /ja/guide/essentials/:splat /ja/advanced/* /ja/guide/advanced/:splat /ja/api/* /ja/api/ /ja/* /ja/:splat /kr/essentials/getting-started.html /kr/guide/ /kr/essentials/* /kr/guide/essentials/:splat /kr/advanced/* /kr/guide/advanced/:splat /kr/api/* /kr/api/ /kr/* /kr/:splat ================================================ FILE: docs/.vuepress/styles/index.styl ================================================ .bit-sponsor font-weight 600 background-color #f3f6f8 padding 0.6em 1.2em border-radius 8px display inline-block margin 1em 0 !important a color #999 img height 40px margin-left 15px img, span vertical-align middle .vueschool background-color #e7ecf3 padding 1em 1.25em border-radius 2px color #486491 position relative display flex a color #486491 !important position relative padding-left 36px &:before content '' position absolute display block width 30px height 30px top calc(50% - 15px); left -4px border-radius 50% background-color #73abfe &:after content '' position absolute display block width 0 height 0 top calc(50% - 5px) left 8px border-top 5px solid transparent border-bottom 5px solid transparent border-left 8px solid #fff @media (max-width: 719px) { .vueschool { display: inline-flex; } } ================================================ FILE: docs/.vuepress/theme/Layout.vue ================================================ ================================================ FILE: docs/.vuepress/theme/components/BuySellAds.vue ================================================ ================================================ FILE: docs/.vuepress/theme/components/CarbonAds.vue ================================================ ================================================ FILE: docs/.vuepress/theme/components/VueSchool/BannerTop.vue ================================================ ================================================ FILE: docs/.vuepress/theme/index.js ================================================ module.exports = { extend: '@vuepress/theme-default' } ================================================ FILE: docs/README.md ================================================ --- home: true heroImage: /logo.png actionText: Get Started → actionLink: /installation.html footer: MIT Licensed | Copyright © 2014-present Evan You, Eduardo San Martin Morote --- Vue Router is the official router for [Vue.js](http://vuejs.org). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include: - Nested route/view mapping - Modular, component-based router configuration - Route params, query, wildcards - View transition effects powered by Vue.js' transition system - Fine-grained navigation control - Links with automatic active CSS classes - HTML5 history mode or hash mode, with auto-fallback in IE9 - Customizable Scroll Behavior [Get started](./guide/) or play with the [examples](https://github.com/vuejs/vue-router/tree/dev/examples) (see [`README.md`](https://github.com/vuejs/vue-router/) to run them). ================================================ FILE: docs/api/README.md ================================================ --- sidebar: auto --- # API Reference ## `` `` is the component for enabling user navigation in a router-enabled app. The target location is specified with the `to` prop. It renders as an `` tag with correct `href` by default, but can be configured with the `tag` prop. In addition, the link automatically gets an active CSS class when the target route is active. `` is preferred over hard-coded `` for the following reasons: - It works the same way in both HTML5 history mode and hash mode, so if you ever decide to switch mode, or when the router falls back to hash mode in IE9, nothing needs to be changed. - In HTML5 history mode, `router-link` will intercept the click event so that the browser doesn't try to reload the page. - When you are using the `base` option in HTML5 history mode, you don't need to include it in `to` prop's URLs. ### `v-slot` API (3.1.0+) `router-link` exposes a low level customization through a [scoped slot](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots). This is a more advanced API that primarily targets library authors but can come in handy for developers as well, most of the time in a custom component like a _NavLink_ or other. **When using the `v-slot` API, it is required to pass one single child to `router-link`**. If you don't, `router-link` will wrap its children in a `span` element. ```html {{ route.fullPath }} ``` - `href`: resolved url. This would be the `href` attribute of an `a` element - `route`: resolved normalized location - `navigate`: function to trigger the navigation. **It will automatically prevent events when necessary**, the same way `router-link` does - `isActive`: `true` if the [active class](#active-class) should be applied. Allows to apply an arbitrary class - `isExactActive`: `true` if the [exact active class](#exact-active-class) should be applied. Allows to apply an arbitrary class #### Example: Applying Active Class to Outer Element Sometimes we may want the active class to be applied to an outer element rather than the `` tag itself, in that case, you can wrap that element inside a `router-link` and use the `v-slot` properties to create your link: ```html
  • {{ route.fullPath }}
  • ``` :::tip If you add a `target="_blank"` to your `a` element, you must omit the `@click="navigate"` handler. ::: ## `` Props ### to - type: `string | Location` - required Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to `router.push()` internally, so the value can be either a string or a location descriptor object. ```html Home Home Home Home Home User Register ``` ### replace - type: `boolean` - default: `false` Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. ```html ``` ### append - type: `boolean` - default: `false` Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with `append` we will end up at `/a/b`. ```html ``` ### tag - type: `string` - default: `"a"` Sometimes we want `` to render as another tag, e.g `
  • `. Then we can use `tag` prop to specify which tag to render to, and it will still listen to click events for navigation. ```html foo
  • foo
  • ``` ### active-class - type: `string` - default: `"router-link-active"` Configure the active CSS class applied when the link is active. Note the default value can also be configured globally via the `linkActiveClass` router constructor option. ### exact - type: `boolean` - default: `false` The default active class matching behavior is **inclusive match**. For example, `` will get this class applied as long as the current path starts with `/a/` or is `/a`. One consequence of this is that `` will be active for every route! To force the link into "exact match mode", use the `exact` prop: ```html ``` Check out more examples explaining active link class [live](https://jsfiddle.net/8xrk1n9f/). ### exact-path > New in 3.5.0 - type: `boolean` - default: `false` Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections. ```html ``` ### exact-path-active-class - type: `string` - default: `"router-link-exact-path-active"` Configure the active CSS class applied when the link is active with exact path match. Note the default value can also be configured globally via the `linkExactPathActiveClass` router constructor option. ### event - type: `string | Array` - default: `'click'` Specify the event(s) that can trigger the link navigation. ### exact-active-class - type: `string` - default: `"router-link-exact-active"` Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option. ### aria-current-value - type: `'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'` - default: `"page"` Configure the value of `aria-current` when the link is active with exact match. It must be one of the [allowed values for aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the default of `page` should be the best fit. ## `` The `` component is a functional component that renders the matched component for the given path. Components rendered in `` can also contain their own ``, which will render components for nested paths. Any non-name props will be passed along to the rendered component, however most of the time the per-route data is contained in the route's params. Since it's just a component, it works with `` and ``. When using them both together, make sure to use `` inside: ```html ``` ## `` Props ### name - type: `string` - default: `"default"` When a `` has a name, it will render the component with the corresponding name in the matched route record's `components` option. See [Named Views](../guide/essentials/named-views.md) for an example. ## Router Construction Options ### routes - type: `Array` Type declaration for `RouteConfig`: ```ts interface RouteConfig = { path: string, component?: Component, name?: string, // for named routes components?: { [name: string]: Component }, // for named views redirect?: string | Location | Function, props?: boolean | Object | Function, alias?: string | Array, children?: Array, // for nested routes beforeEnter?: (to: Route, from: Route, next: Function) => void, meta?: any, // 2.6.0+ caseSensitive?: boolean, // use case sensitive match? (default: false) pathToRegexpOptions?: Object // path-to-regexp options for compiling regex } ``` ### mode - type: `string` - default: `"hash" (in browser) | "abstract" (in Node.js)` - available values: `"hash" | "history" | "abstract"` Configure the router mode. - `hash`: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API. - `history`: requires HTML5 History API and server config. See [HTML5 History Mode](../guide/essentials/history-mode.md). - `abstract`: works in all JavaScript environments, e.g. server-side with Node.js. **The router will automatically be forced into this mode if no browser API is present.** ### base - type: `string` - default: `"/"` The base URL of the app. For example, if the entire single page application is served under `/app/`, then `base` should use the value `"/app/"`. ### linkActiveClass - type: `string` - default: `"router-link-active"` Globally configure `` default active class. Also see [router-link](#router-link). ### linkExactActiveClass - type: `string` - default: `"router-link-exact-active"` Globally configure `` default active class for exact matches. Also see [router-link](#router-link). ### scrollBehavior - type: `Function` Signature: ```ts type PositionDescriptor = { x: number, y: number } | { selector: string } | void type scrollBehaviorHandler = ( to: Route, from: Route, savedPosition?: { x: number, y: number } ) => PositionDescriptor | Promise ``` For more details see [Scroll Behavior](../guide/advanced/scroll-behavior.md). ### parseQuery / stringifyQuery - type: `Function` Provide custom query string parse / stringify functions. Overrides the default. ### fallback - type: `boolean` - default: `true` Controls whether the router should fallback to `hash` mode when the browser does not support `history.pushState` but mode is set to `history`. Setting this to `false` essentially makes every `router-link` navigation a full page refresh in IE9. This is useful when the app is server-rendered and needs to work in IE9, because a hash mode URL does not work with SSR. ## Router Instance Properties ### router.app - type: `Vue instance` The root Vue instance the `router` was injected into. ### router.mode - type: `string` The [mode](./#mode) the router is using. ### router.currentRoute - type: `Route` The current route represented as a [Route Object](#the-route-object). ### router.START_LOCATION (3.5.0+) - type: `Route` Initial route location represented as a [Route Object](#the-route-object) where the router starts at. Can be used in navigation guards to differentiate the initial navigation. ```js import VueRouter from 'vue-router' const router = new VueRouter({ // ... }) router.beforeEach((to, from) => { if (from === VueRouter.START_LOCATION) { // initial navigation } }) ``` ## Router Instance Methods ### router.beforeEach ### router.beforeResolve ### router.afterEach Signatures: ```js router.beforeEach((to, from, next) => { /* must call `next` */ }) router.beforeResolve((to, from, next) => { /* must call `next` */ }) router.afterEach((to, from) => {}) ``` Add global navigation guards. See [Navigation Guards](../guide/advanced/navigation-guards.md) for more details. All three methods return a function that removes the registered guard/hook. ### router.push ### router.replace ### router.go ### router.back ### router.forward Signatures: ```js router.push(location, onComplete?, onAbort?) router.push(location).then(onComplete).catch(onAbort) router.replace(location, onComplete?, onAbort?) router.replace(location).then(onComplete).catch(onAbort) router.go(n) router.back() router.forward() ``` Programmatically navigate to a new URL. See [Programmatic Navigation](../guide/essentials/navigation.md) for more details. These functions can only be called after installing the Router plugin and passing it to the root Vue instance as shown in the [Getting Started](../guide/README.md). ### router.getMatchedComponents Signature: ```js const matchedComponents: Array = router.getMatchedComponents(location?) ``` Returns an Array of the components (definition/constructor, not instances) matched by the provided location or the current route. This is mostly used during server-side rendering to perform data prefetching. ### router.resolve Signature: ```js const resolved: { location: Location; route: Route; href: string; } = router.resolve(location, current?, append?) ``` Reverse URL resolving. Given location in form same as used in ``. - `current` is the current Route by default (most of the time you don't need to change this) - `append` allows you to append the path to the `current` route (as with [`router-link`](#router-link-props)) ### router.addRoutes _DEPRECATED_: use [`router.addRoute()`](#router-addroute) instead. Signature: ```ts router.addRoutes(routes: Array) ``` Dynamically add more routes to the router. The argument must be an Array using the same route config format with the `routes` constructor option. ### router.addRoute > New in 3.5.0 Add a new route to the router. If the route has a `name` and there is already an existing one with the same one, it overwrites it. Signature: ```ts addRoute(route: RouteConfig): () => void ``` ### router.addRoute > New in 3.5.0 Add a new route record as the child of an existing route. If the route has a `name` and there is already an existing one with the same one, it overwrites it. Signature: ```ts addRoute(parentName: string, route: RouteConfig): () => void ``` ### router.getRoutes > New in 3.5.0 Get the list of all the active route records. **Note only documented properties are considered Public API**, avoid using any other property e.g. `regex` as it doesn't exist on Vue Router 4. Signature: ```ts getRoutes(): RouteRecord[] ``` ### router.onReady Signature: ```js router.onReady(callback, [errorCallback]) ``` This method queues a callback to be called when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route. This is useful in server-side rendering to ensure consistent output on both the server and the client. The second argument `errorCallback` is only supported in 2.4+. It will be called when the initial route resolution runs into an error (e.g. failed to resolve an async component). ### router.onError Signature: ```js router.onError(callback) ``` Register a callback which will be called when an error is caught during a route navigation. Note for an error to be called, it must be one of the following scenarios: - The error is thrown synchronously inside a route guard function; - The error is caught and asynchronously handled by calling `next(err)` inside a route guard function; - An error occurred when trying to resolve an async component that is required to render a route. ## The Route Object A **route object** represents the state of the current active route. It contains parsed information of the current URL and the **route records** matched by the URL. The route object is immutable. Every successful navigation will result in a fresh route object. The route object can be found in multiple places: - Inside components as `this.$route` - Inside `$route` watcher callbacks - As the return value of calling `router.match(location)` - Inside navigation guards as the first two arguments: ```js router.beforeEach((to, from, next) => { // `to` and `from` are both route objects }) ``` - Inside the `scrollBehavior` function as the first two arguments: ```js const router = new VueRouter({ scrollBehavior(to, from, savedPosition) { // `to` and `from` are both route objects } }) ``` ### Route Object Properties - **\$route.path** - type: `string` A string that equals the path of the current route, always resolved as an absolute path. e.g. `"/foo/bar"`. - **\$route.params** - type: `Object` An object that contains key/value pairs of dynamic segments and star segments. If there are no params the value will be an empty object. - **\$route.query** - type: `Object` An object that contains key/value pairs of the query string. For example, for a path `/foo?user=1`, we get `$route.query.user == 1`. If there is no query the value will be an empty object. - **\$route.meta** - type: `Object` An object that contains key/value pairs of the route meta object. If there are no meta properties the value will be an empty object. - **\$route.hash** - type: `string` The hash of the current route (with the `#`), if it has one. If no hash is present the value will be an empty string. - **\$route.fullPath** - type: `string` The full resolved URL including query and hash. - **\$route.matched** - type: `Array` An Array containing **route records** for all nested path segments of the current route. Route records are the copies of the objects in the `routes` configuration Array (and in `children` Arrays): ```js const router = new VueRouter({ routes: [ // the following object is a route record { path: '/foo', component: Foo, children: [ // this is also a route record { path: 'bar', component: Bar } ] } ] }) ``` When the URL is `/foo/bar`, `$route.matched` will be an Array containing both objects (cloned), in parent to child order. - **\$route.name** The name of the current route, if it has one. (See [Named Routes](../guide/essentials/named-routes.md)) - **\$route.redirectedFrom** The name of the route being redirected from, if there were one. (See [Redirect and Alias](../guide/essentials/redirect-and-alias.md)) ## Component Injections ### Component Injected Properties These properties are injected into every child component by passing the router instance to the root instance as the `router` option. - **this.\$router** The router instance. - **this.\$route** The current active [Route](#the-route-object). This property is read-only and its properties are immutable, but it can be watched. ### Component Enabled Options - **beforeRouteEnter** - **beforeRouteUpdate** - **beforeRouteLeave** See [In Component Guards](../guide/advanced/navigation-guards.md#in-component-guards). ================================================ FILE: docs/fr/README.md ================================================ --- home: true heroImage: /logo.png actionText: Get Started → actionLink: /fr/installation.html footer: MIT Licensed | Copyright © 2014-present Evan You, Eduardo San Martin Morote --- Vue Router est le router officiel pour [Vue.js](http://vuejs.org). Il s'intègre aisément avec Vue.js pour faire des applications mono page avec Vue.js. Fonctionnalités incluses: - Vues et routes imbriquées - Modulaire, configuration basée sur les composants - Paramètres de route, de requête - Effets de transition de vues basées sur le systeme de transition de Vue.js - Gestion fine de la navigation - Classes CSS pour liens actifs - Mode HTML5 de la gestion de l'historique ou mode par hash, avec solution de repli automatique pour IE9 - Gestion du scroll [Pour commencer](./guide/) ou jouer avec les [exemples](https://github.com/vuejs/vue-router/tree/dev/examples) (voir [`README.md`](https://github.com/vuejs/vue-router/) pour les faire fonctionner). ================================================ FILE: docs/fr/api/README.md ================================================ --- sidebar: auto --- # API ## `` `` est le composant pour activer la navigation utilisateur dans une application où le routeur est activé. La localisation cible est spécifiée grâce à la prop `to`. Il est rendu en tant que balise `` avec le `href` correct par défaut, mais peut être configuré grâce à la prop `tag`. De plus, le lien se verra attribuer une classe CSS active lorsque la route cible est active. `` est préféré par rapport au `` en dur dans le code pour les raisons suivantes : - Cela fonctionne de la même manière qu'on soit dans le mode historique HTML5 ou le mode hash, donc si vous avez décidé de changer de mode, ou alors que le routeur se replie sur le mode hash pour IE9, rien n'a besoin d'être changé. - Dans le mode historique HTML5, `router-link` interceptera l'évènement du clic, comme ça le navigateur n'essaiera pas de rafraichir la page. - En utilisant l'option `base` dans le mode historique HTML5, vous n'avez pas besoin de l'inclure dans la prop `to` ### `v-slot` API (3.1.0+) `router-link` est fortement personnalisable via une [slot avec portée](https://fr.vuejs.org/v2/guide/components-slots.html#Slots-avec-portee). C'est une API qui cible principalement les créateurs de bibliothèque, mais elle peut aussi servir pour les développeurs, le plus souvent dans des composants personnalisés tel qu'un _NavLink_ et autre. **Lors de l'utilisation `v-slot` API, il faut obligatoirement passer un composant enfant unique au `router-link`**. Si vous ne le faites pas, `router-link` va entourer ses enfants avec une balise `span`. ```html {{ route.fullPath }} ``` - `href`: URL résolue. Ce serait l'attribut `href` d'une balise `a` - `route`: localisation normalisée et résolue - `navigate`: fonction pour lancer la navigation. **En cas de nécessité il va automatiquement empêcher les événements**, de la même façon que `router-link` - `isActive`: `true` si [active class](#active-class) devrait être appliqué. Permet d'appliquer une classe arbitraire - `isExactActive`: `true` si [exact active class](#exact-active-class) devrait être appliqué. Permet d'appliquer une classe arbitraire ### Appliquer la classe active à l'élément extérieur Parfois, on voudrait que la classe active soit appliquée à un élément extérieur au lieu de l'élément `` lui-même, dans ce cas, vous pouvez faire le rendu de cet élément extérieur en utilisant `` et en entourant le tag `` : ```html /foo ``` Dans ce cas, `` sera le lien actuel (et récupèrera le bon `href`), mais la classe active sera appliquée à l'élément extérieur `
  • `. ## `` Props ### to - type : `string | Location` - requis Désigne la route cible du lien. Lorsqu'il est cliqué, la valeur de la prop `to` va être passée de manière interne à `router.push`, donc la valeur peut soit être une chaine de caractères, ou alors un objet décrivant une localisation. ```html Accueil Accueil Accueil Accueil Accueil Utilisateur S'enregistrer ``` ### replace - type : `boolean` - défaut : `false` Configurer la prop `replace` appellera `router.replace()` au lieu de `router.push()` lors du clic, comme ça, la navigation ne laissera pas un enregistrement dans l'historique. ```html ``` ### append - type : `boolean` - défaut : `false` Configurer la propriété `append` suffixe toujours le chemin relatif au chemin courant. Par exemple, assumons que nous naviguons de `/a` à un lien relatif `b`, sans `append` on finira sur `/b`, mais avec `append` on finira sur `/a/b`. ```html ``` ### tag - type : `string` - défaut : `"a"` Parfois, on veut que `` soit rendu avec une balise différente, ex : `
  • `. On peut alors utiliser la prop `tag` pour modifier la balise qui sera rendue, et elle écoutera toujours les évènements de clic pour la navigation. ```html foo
  • foo
  • ``` ### active-class - type : `string` - défaut : `"router-link-active"` Configure la classe CSS active qui sera appliquée lorsque le lien sera actif. Notez que la valeur par défaut peut aussi être configurée de manière globale via l'option `linkActiveClass` du constructeur du routeur. ### exact - type : `boolean` - défaut : `false` Le comportement par défaut de la correspondance de classe active est une **correspondance inclusive**. Par exemple, `` verra cette classe appliquée tant que le chemin courant commencera par `/a/` ou `/a`. Une conséquence de cela est que `` sera actif pour toutes les routes ! Pour forcer le lien dans un « mode correspondance exacte », utilisez la prop `exact`. ```html ``` Allez voir les exemples expliquant la classe active pour les liens [ici](https://jsfiddle.net/8xrk1n9f/). ### event - type : `string | Array` - défaut : `'click'` Spécifie les évènement(s) que peu(ven)t lancer la navigation de lien. ### exact-active-class - type : `string` - défaut : `"router-link-exact-active"` Configure la classe CSS active qui sera appliquée lorsqu'un lien sera actif avec une correspondance exacte. Notez que la valeur par défaut peut aussi être configurée de manière globale via l'option `linkExactActiveClass` du constructeur du routeur. ## `` Le composant `` est un composant fonctionnel qui fait le rendu du composant correspondant au chemin donné. Les composants rendus dans `` peuvent aussi contenir leur propre ``, qui fera le rendu des composants pour les chemins imbriqués. ## `` Props ### name - type : `string` - défaut : `"default"` Lorsqu'un `` a un nom, il fera le rendu du composant correspondant à ce nom dans les itinéraires de route correspondant à l'option `components`. Voir les [Routes nommées](../guide/essentials/named-views.md) pour un exemple. ## Options de construction du routeur ### routes - type: `Array` Déclaration de type pour `RouteConfig` : ```js declare type RouteConfig = { path: string, component?: Component, name?: string, // pour les routes nommées components?: { [name: string]: Component }, // pour les vues nommées redirect?: string | Location | Function, props?: boolean | string | Function, alias?: string | Array, children?: Array, // pour les routes imbriquées beforeEnter?: (to: Route, from: Route, next: Function) => void, meta?: any, // 2.6.0+ caseSensitive?: boolean, // use case sensitive match? (default: false) pathToRegexpOptions?: Object // path-to-regexp options for compiling regex } ``` ### mode - type : `string` - défaut : `"hash" (dans le navigateur) | "abstract" (en Node.js)` - valeurs disponibles : `"hash" | "history" | "abstract"` Configure le mode du routeur. - `hash` : utilise le hash de l'URL pour le routage. Fonctionne dans tous les navigateurs supportés par Vue, ainsi que ceux qui ne supportent pas l'API History d'HTML5. - `history` : nécessite l'API History d'HTML 5 et la configuration du serveur. Voir [Mode historique de HTML5](../guide/essentials/history-mode.md). - `abstract` : fonctionne dans tous les environnements JavaScript, ex. côté serveur avec Node.js. **Le routeur sera automatiquement forcé d'utiliser ce mode si aucune API navigateur n'est présente.** ### base - type : `string` - défaut : `"/"` L'URL de base de l'application. Par exemple, si l'application monopage entière est distribuée sous `/app/`, alors `base` doit utiliser la valeur `"/app/"`. ### linkActiveClass - type : `string` - défaut : `"router-link-active"` Configure de manière globale la classe active par défaut de ``. Voir aussi [router-link](./#router-link). ### linkExactActiveClass - type : `string` - default : `"router-link-exact-active"` Configure de manière globale la classe active par défaut de `` lors d'une correspondance exacte. Voir aussi [router-link](./#router-link). ### scrollBehavior - type : `Function` Signature : ```ts type PositionDescriptor = { x: number, y: number } | { selector: string } | void type scrollBehaviorHandler = ( to: Route, from: Route, savedPosition?: { x: number, y: number } ) => PositionDescriptor | Promise ``` Pour plus de détails, voir [Comportement du Scroll](../guide/advanced/scroll-behavior.md). ### parseQuery / stringifyQuery - type : `Function` Permettent de spécifier des fonctions personnalisées pour formater en objet ou en chaîne de caractères la requête. Surcharge les fonctions par défaut. ### fallback - type : `boolean` Contrôle comment le routeur devrait passer en mode `hash` quand le navigateur ne supporte pas `history.pushState`. Par défaut à `true`. Passer cette valeur à `false` va essentiellement faire que la navigation via `router-link` va réclamer un rechargement de page dans IE9. Ceci est utile quand l'application est rendue côté serveur et à besoin de fonctionner dans IE9, car le mode hash ne fonctionne pas avec du SSR. ## L'instance du routeur ### router.app - type: `instance de Vue` L'instance racine de Vue dans laquelle l'instance de `routeur` a été injectée. ### router.mode - type: `string` Le [mode](./#mode) que le routeur utilise. ### router.currentRoute - type: `Route` La route actuelle représentée en tant qu'un [objet route](./#proprietes-de-l-objet-route). ## Méthodes ### router.beforeEach ### router.beforeResolve ### router.afterEach Ajout des interceptions globales de navigation. Voir les [Intercepteurs de navigation](../guide/advanced/navigation-guards.md). Dans la version 2.5.0+, ces trois méthodes retournent une fonction qui enlève les fonctions d'interception et hooks enregistrés. ### router.push ### router.replace ### router.go ### router.back ### router.forward Navigue à une nouvelle URL de façon programmée. Voir [Navigation de façon programmée](../guide/essentials/navigation.md). ### router.getMatchedComponents Retourne un tableau de composants (définition/constructeur et non les instances) correspondant à la `location` passée en paramètre, ou alors de la route actuelle. Cette fonction est principalement utilisée pendant le rendu côté serveur afin d'effectuer une prérécupération des données. ### router.resolve Inverse la résolution d'URL. La `location` doit avoir la même forme qu'utilisée dans ``, retourne un objet avec les propriétés suivantes : ```js { location: Location route: Route href: string } ``` - `current` is the current Route by default (most of the time you don't need to change this) - `append` allows you to append the path to the `current` route (as with [`router-link`](./#router-link-props)) ### router.addRoutes Permet d'ajouter dynamiquement des routes au routeur. L'argument doit être un tableau utilisant le même format de configuration que l'option `routes` du constructeur. ### router.onReady Cette méthode met en file d'attente une fonction de rappel qui sera appelée lorsque le routeur aura complété la navigation initiale, ce qui signifie qu'il a résolu tous les hooks d'entrées asynchrones et composants asynchrones qui sont associés à la route initiale. C'est utile pendant un rendu côté serveur pour assurer une sortie consistance sur le serveur et le client. Le deuxième argument `errorCallback` est uniquement supporté à partir de la version 2.4. Il sera appelé lorsque la résolution de la route initiale résultera en une erreur (ex. : la résolution d'un composant asynchrone qui a échoué). ### router.onError Enregistre une fonction de rappel qui sera appelée lorsqu'une erreur sera capturée pendant la navigation vers une route. Notez que pour qu'une erreur soit appelée, cela doit correspondre à l'un des scénarios suivants : - L'erreur est lancée de manière synchrone à l'intérieur d'une fonction d'interception de route ; - L'erreur est capturée et traitée de manière asynchrone en appelant `next(err)` à l'intérieur d'une fonction d'interception de route ; - Une erreur est survenue pendant la résolution d'un composant asynchrone qui est requis pour faire le rendu d'une route. # L'objet `Route` Un **objet `Route`** représente l'état actuel de la route active. Il contient des informations analysées à propos de l'URL courant et **les itinéraires de route** appariés par l'URL. L'objet `Route` est immutable. Chaque navigation qui se déroule avec succès résultera en un nouvel objet `Route`. L'objet `Route` peut être trouvé à plusieurs endroits : - À l'intérieur des composants en tant que `this.$route` - À l'intérieur des fonctions de rappel des observateurs de `$route` - Comme valeur de retour après l'appel de `router.match(location)` - À l'intérieur des fonctions d'interception de la navigation, dans les deux premiers paramètres de la fonction : ```js router.beforeEach((to, from, next) => { // `to` et `from` sont tous les deux des objets Route }) ``` - À l'intérieur de la fonction `scrollBehavior` dans les deux premiers arguments : ```js const router = new VueRouter({ scrollBehavior(to, from, savedPosition) { // `to` et `from` sont tous les deux des objets Route } }) ``` ### Propriétés de l'objet `Route` - **\$route.path** - type : `string` Une chaine de caractères représentant le chemin de la route en cours, toujours résolue en tant que chemin absolu, ex : `"/foo/bar"`. - **\$route.params** - type : `Object` Un objet qui contient des pairs clé/valeur de segments dynamiques et segments _star_. S'il n'y a pas de paramètres, alors la valeur sera un objet vide. - **\$route.query** - type : `Object` Un objet qui contient des pairs clé/valeur de la requête au format d'une chaine de caractères. Par exemple, pour un chemin `/foo?user=1`, on aura `$route.query.user == 1`. S'il n'y a pas de requête, alors la valeur sera un objet vide. - **\$route.hash** - type : `string` Le hash de la route courante (avec le `#`), s'il y en a un. S'il n'y a pas de hash, alors la valeur sera une chaine de caractères vide. - **\$route.fullPath** - type : `string` L'URL entièrement résolu, incluant la requête et le hash. - **\$route.matched** - type : `Array` Un `Array` contenant les **les itinéraires de la route** pour chaque segment de chemin imbriqué de la route courante. Les itinéraires de la route sont des copies des objets dans le tableau de configuration `routes` (et dans les tableaux `children`). ```js const router = new VueRouter({ routes: [ // l'objet qui suit est un itinéraire de route { path: '/foo', component: Foo, children: [ // c'est aussi un itinéraire { path: 'bar', component: Bar } ] } ] }) ``` Lorsque l'URL sera `/foo/bar`, `$route.matched` sera un `Array` contenant les deux objets (clonés), dans l'ordre parent à l'enfant. - **\$route.name** Le nom de la route courante, si elle en a un. (Voir [Routes nommées](../guide/essentials/named-routes.md)). - **\$route.redirectedFrom** Le nom de la route d'où la page a été redirigée, si elle en a un. (Voir [Redirection et alias](../guide/essentials/redirect-and-alias.md)). ## Injections de composant ### Propriétés injectées Ces propriétés sont injectées dans chacun des composants enfants, en passant l'instance du routeur à l'application racine de Vue en tant qu'option `router`. - **\$router** L'instance du routeur. - **\$route** La [Route](./#proprietes-de-l-objet-route) actuellement active. C'est une propriété en lecture seule et ses propriétés sont immutables, mais elles restent malgré tout observables. ### Options activées - **beforeRouteEnter** - **beforeRouteUpdate** (ajouté en 2.2) - **beforeRouteLeave** Voir l'[interception par composant](../guide/advanced/navigation-guards.md#securisation-par-composant). ================================================ FILE: docs/fr/guide/README.md ================================================ # Pour commencer ::: tip Note Nous utiliserons [ES2015](https://github.com/lukehoban/es6features) dans les exemples de code dans ce guide. Tous les exemples utiliseront la version complète de Vue pour rendre l'analyse de template possible. Plus de détails [ici](https://fr.vuejs.org/guide/installation.html#Runtime-Compiler-vs-Runtime-seul). ::: Créer une application monopage avec Vue + Vue Router est vraiment simple. Avec Vue.js, nous concevons déjà notre application avec des composants. En ajoutant vue-router dans notre application, tout ce qu'il nous reste à faire est de relier nos composants aux routes, et de laisser vue-router faire le rendu. Voici un exemple de base : ## HTML ```html

    Bonjour l'application !

    Aller à Foo Aller à Bar

    ``` ## JavaScript ```js // 0. Si vous utilisez un système de module (par ex. via vue-cli), il faut importer Vue et Vue Router et ensuite appeler `Vue.use(VueRouter)`. // 1. Définissez les composants de route. // Ces derniers peuvent être importés depuis d'autre fichier const Foo = { template: '
    foo
    ' } const Bar = { template: '
    bar
    ' } // 2. Définissez des routes. // Chaque route doit correspondre à un composant. Le « composant » peut // soit être un véritable composant créé via `Vue.extend()`, ou juste un // objet d'options. // Nous parlerons plus tard des routes imbriquées. const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. Créez l'instance du routeur et passez l'option `routes`. // Vous pouvez également passer des options supplémentaires, // mais nous allons faire simple pour l'instant. const router = new VueRouter({ routes // raccourci pour `routes: routes` }) // 5. Créez et montez l'instance de Vue. // Soyez sûr d'injecter le routeur avec l'option `router` pour // permettre à l'application tout entière d'être à l'écoute du routeur. const app = new Vue({ router }).$mount('#app') // L'application est maintenant en marche ! ``` En injectant le routeur, nous y avons accès à travers `this.$router`. Nous avons également accès à la route courante derrière `this.$route` depuis n'importe quel composant : ```js // Home.vue export default { computed: { username() { // Nous verrons ce que représente `params` dans un instant. return this.$route.params.username } }, methods: { goBack() { window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/') } } } ``` Dans les documentations, nous allons souvent utiliser l'instance `router`. Gardez à l'esprit que l'utilisation de `this.$router` est exactement la même chose que celle de `router`. La raison pour laquelle nous utilisons `this.$router` est la possibilité ainsi offerte de ne pas avoir à importer le routeur dans chaque fichier de composant ayant besoin d'accéder au routage. Vous pouvez aussi regarder cet [exemple](https://jsfiddle.net/yyx990803/xgrjzsup/). Notez qu'un `` obtiendra automatiquement la classe `.router-link-active` lorsque sa route cible correspond à la route actuelle. Vous pouvez en apprendre plus à propos de cela dans sa [documentation d'API](../api/#router-link). ================================================ FILE: docs/fr/guide/advanced/data-fetching.md ================================================ # Récupération de données Parfois vous avez besoin de récupérer des données depuis le serveur lorsqu'une route est activée. Par exemple, avant de faire le rendu d'un profil utilisateur, vous avez besoin de récupérer les données de l'utilisateur depuis le serveur. Nous pouvons y parvenir de deux façons différentes : - **Récupération de données après la navigation** : effectue la navigation en premier, et récupère les données dans le hook entrant du cycle de vie d'un composant. Affiche un état de chargement pendant que les données sont en train d'être récupérées. - **Récupération de données avant la navigation** : récupère les données avant la navigation dans la fonction d'interception d'entrée de la route, et effectue la navigation après que les données aient été récupérées. Techniquement, les deux choix sont valides. Cela dépend de l'expérience utilisateur que vous souhaitez apporter. ## Récupération de données après la navigation En utilisant cette approche, nous naviguons et faisons immédiatement le rendu du composant et récupérons les données via le hook `created` du composant. Cela nous donne l'opportunité d'afficher un état de chargement pendant que les données sont récupérées à travers le réseau, et nous pouvons aussi gérer le chargement différemment pour chaque vue. Assumons que nous ayons un composant `Post` qui a besoin de récupérer des données pour un billet identifié par `$route.params.id` : ``` html ``` ``` js export default { data () { return { loading: false, post: null, error: null } }, created () { // récupérer les données lorsque la vue est créée et // que les données sont déjà observées this.fetchData() }, watch: { // appeler encore la méthode si la route change '$route': 'fetchData' }, methods: { fetchData () { this.error = this.post = null this.loading = true // remplacer `getPost` par une fonction de récupération de données getPost(this.$route.params.id, (err, post) => { this.loading = false if (err) { this.error = err.toString() } else { this.post = post } }) } } } ``` ## Récupération de données avant la navigation Avec cette approche, nous récupèrerons les données avant de naviguer vers la nouvelle route. Nous pouvons effectuer la récupération de données dans la fonction d'interception `beforeRouteEnter` du composant à venir, et seulement appeler `next` lorsque la récupération est terminée : ``` js export default { data () { return { post: null, error: null } }, beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { next(vm => vm.setData(err, post)) }) }, // quand la route change et que ce composant est déjà rendu, // la logique est un peu différente beforeRouteUpdate (to, from, next) { this.post = null getPost(to.params.id, (err, post) => { this.setData(err, post) next() }) }, methods: { setData (err, post) { if (err) { this.error = err.toString() } else { this.post = post } } } } ``` L'utilisateur va rester sur la vue précédente pendant que la ressource est en train d'être récupérée pour la vue à venir. Il est cependant recommandé d'afficher une barre de progression ou un autre type d'indicateur pendant que les données sont en train d'être récupérées. Si la récupération échoue, il est aussi recommandé d'afficher une sorte de message d'erreur global. ================================================ FILE: docs/fr/guide/advanced/lazy-loading.md ================================================ # Chargement à la volée Pendant la construction d'applications avec un empaqueteur (« bundler »), le paquetage JavaScript peut devenir un peu lourd, et donc cela peut affecter le temps de chargement de la page. Il serait plus efficace si l'on pouvait séparer chaque composant de route dans des fragments séparés, et de les charger uniquement lorsque la route est visitée. En combinant la [fonctionnalité de composant asynchrone](https://fr.vuejs.org/v2/guide/components.html#Composants-asynchrones) de Vue et la [fonctionnalité de scission de code](https://webpack.js.org/guides/code-splitting-async/) de webpack, il est très facile de charger à la volée les composants de route. Premièrement, un composant asynchrone peut définir une fonction fabrique qui retourne une Promesse (qui devrait résoudre le composant lui-même) : ```js const Foo = () => Promise.resolve({ /* définition du composant */ }) ``` Deuxièmement, avec webpack 2, nous pouvons utiliser la syntaxe d'[import dynamique](https://github.com/tc39/proposal-dynamic-import) pour indiquer un point de scission de code : ```js import('./Foo.vue') // returns a Promise ``` ::: tip Note si vous utilisez Babel, vous aurez besoin d'ajouter le plugin [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) de façon à ce que Babel puisse analyser correctement la syntaxe. ::: En combinant les deux, on définit un composant asynchrone qui sera automatiquement scindé par webpack : ```js const Foo = () => import('./Foo.vue') ``` Rien n'a besoin d'être modifié dans la configuration de la route, utilisez `Foo` comme d'habitude. ```js const router = new VueRouter({ routes: [{ path: '/foo', component: Foo }] }) ``` ## Grouper des composants dans le même fragment Parfois on aimerait grouper tous les composants imbriqués sous la même route, dans un seul et même fragment asynchrone. Pour arriver à cela, nous avons besoin d'utiliser les [fragments nommés](https://webpack.js.org/api/module-methods/#magic-comments) en donnant un nom au fragment en utilisant une syntaxe de commentaire spéciale (requires webpack > 2.4) : ```js const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') ``` webpack groupera tous les modules asynchrones avec le même nom de fragment dans le même fragment asynchrone. ================================================ FILE: docs/fr/guide/advanced/meta.md ================================================ # Champs meta de route Vous pouvez inclure un champ `meta` quand vous définissez une route : ``` js const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // un champ `meta` meta: { requiresAuth: true } } ] } ] }) ``` Comment maintenant accéder à ce champ `meta` ? Tout d'abord, chaque objet route dans la configuration de `routes` est appelé un **registre de route**. Les registres de route peuvent être imbriqués. Par conséquent, quand une route concorde, elle peut potentiellement concorder avec plus d'un registre de route. Par exemple, avec la configuration de route ci-dessous, l'URL `/foo/bar` va concorder avec le registre parent et le registre enfant. Tous les registres concordants avec une route sont exposés dans l'objet `$route` (ainsi que les objets de route dans les sécurisations de navigation) dans le tableau `$route.matched`. Donc, nous devons itérer à travers `$route.matched` pour vérifier les champs meta dans les registres de route. Un exemple concret est la vérification d'un champ meta dans une interception de navigation globale : ``` js router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // cette route demande une autorisation, vérifions si l'utilisateur est logué. // sinon, redirigeons le sur la page de login. if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // assurez vous de toujours appeler `next()` ! } }) ``` ================================================ FILE: docs/fr/guide/advanced/navigation-guards.md ================================================ # Intercepteurs de navigation Comme le nom le suggère, l'interception de navigation fournie par `vue-router` est principalement utilisée pour intercepter la navigation avec des redirections ou des annulations d'accès. Il y a plusieurs hooks disponibles lors du processus de navigation : globaux, par route ou par composant. Souvenez-vous de cela : **le changement de paramètre ou de query ne va pas lancer d'interception d'entrée ou de sortie de navigation**. Vous pouvez toujours [observer l'objet `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) pour réagir à ces changements, ou utiliser la fonction `beforeRouteUpdate` d'une interception par composant. ## Interception globale Vous pouvez abonner une interception d'entrée en utilisant `router.beforeEach` : ``` js const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) ``` Les interceptions d'entrées globales sont appelées lors de l'ordre de création, chaque fois qu'une navigation est déclenchée. Les interceptions peuvent être résolues de manière asynchrone, et la navigation est considérée comme **en attente** avant que tous les hooks ne soient résolus. Chaque fonction d'interception reçoit trois arguments : - **`to: Route`**: L'[objet `Route`](../../api/#the-route-object) cible vers lequel on navigue. - **`from: Route`**: la route courante depuis laquelle nous venons de naviguer. - **`next: Function`**: cette fonction doit être appelée pour **résoudre** le hook. L'action dépend des arguments fournis à `next`: - **`next()`**: se déplacer jusqu'au prochain hook du workflow. S'il ne reste aucun hook, la navigation est **confirmée**. - **`next(false)`**: annuler la navigation courante. Si l'URL du navigateur avait changé (manuellement par l'utilisateur ou via le bouton retour du navigateur), il sera remis à sa valeur de route de `from`. - **`next('/')` ou `next({ path: '/' })`**: redirige vers le nouvel URL. La navigation courante va être arrêtée et une nouvelle va se lancer. Vous pouvez passer n'importe quel objet à `next`, vous permettant ainsi de spécifier des options comme `replace: true`, `name: 'home'` et n'importe quelles options dans [la prop `to` du `router-link`](../../api/#to) ou [`router.push`](../../api/#routeur-push). - **`next(error)`**: (2.4.0+) si l'argument passé à `next` est une instance de `Error`, la navigation va s'arrêter et l'erreur sera passée aux fonctions de rappel enregistrées via [`router.onError()`](../../api/#router-onerror). **Assurez-vous de toujours appeler la fonction `next`, sinon le hook ne sera jamais résolu.** ## Résolutions des interceptions globales Vous pouvez abonner une interception globale avec `router.beforeResolve`. Ceci est similaire a `router.beforeEach`, mais la différence est qu'elle sera appelée juste après que la navigation soit confirmée, **après que toutes les interceptions par composants et les composants de route asynchrone ait été résolu**. ## Hooks de sortie globaux Vous pouvez également abonner des hooks de sortie, cependant, à la différence des interceptions, ces hooks ne fournissent pas de fonction `next` et n'affecte pas la navigation : ``` js router.afterEach((to, from) => { // ... }) ``` ## Interception par route Vous pouvez définir l'interception `beforeEnter` directement sur l'objet de configuration d'une route : ``` js const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) ``` Ces interceptions ont exactement le même effet que les interceptions globales d'entrée. ## Interception par composant Enfin, vous pouvez directement définir une interception de navigation a l'intérieur du composant lui-même (celui passé à la configuration du routeur) avec les options suivantes : - `beforeRouteEnter` - `beforeRouteUpdate` - `beforeRouteLeave` ``` js const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // appelée avant que la route vers le composant soit confirmée. // cette fonction n'a pas accès à l'instance du composant avec `this`, // car le composant n'a pas encore été créé quand cette interception est appelée ! }, beforeRouteUpdate (to, from, next) { // appelée quand la route qui fait le rendu de ce composant change, // mais que ce composant est utilisé de nouveau dans la nouvelle route. // Par exemple, pour une route avec le paramètre dynamique `/foo/:id`, quand nous // naviguons entre `/foo/1` et `/foo/2`, la même instance du composant `Foo` // va être réutilisée, et ce hook va être appelé quand cela arrivera. // ce hook a accès à l'instance de ce composant via `this`. }, beforeRouteLeave (to, from, next) { // appelée quand la route qui fait le rendu de ce composant est sur le point // d'être laissée en faveur de la prochaine route. // elle a accès à l'instance de ce composant via `this`. } } ``` L'interception `beforeRouteEnter` **n'a PAS** accès à `this`, car l'interception est appelée avant que la navigation soit confirmée, et le nouveau composant entrant n'a même pas encore été créé. Cependant, vous pouvez accéder à l'instance en passant dans la fonction de rappel `next`. Cette fonction de rappel va être appelée quand la navigation sera confirmée, et l'instance du composant sera passée à la fonction de rappel en tant qu'argument : ``` js beforeRouteEnter (to, from, next) { next(vm => { // accès à l'instance du composant via `vm` }) } ``` Notez que `beforeRouteEnter` est la seule interception qui supporte une fonction de rappelle dans `next`. Pour `beforeRouteUpdate` et `beforeRouteLeave`, `this` est déjà disponible. Le passage d'une fonction de rappel n'étant pas nécessaire, il n'est donc pas *supporté* : ```js beforeRouteUpdate (to, from, next) { // utiliser juste `this` this.name = to.params.name next() } ``` L'**interception de sortie** est habituellement utilisée pour empécher l'utilisateur de quitter la route sans avoir sauvegardé ses changements. La navigation peut être annulée en appelant `next(false)`. ```js beforeRouteLeave (to, from , next) { const answer = window.confirm('Voulez-vous vraiment quitter cette page ? Vos changements seront perdus.') if (answer) { next() } else { next(false) } } ``` ## Le flux de résolution de navigation complet 1. La navigation est demandée. 2. Appel de l'interception de sortie des composants désactivés. 3. Appel des interceptions globales `beforeEach`. 4. Appel des interceptions `beforeRouteUpdate` pour les composants réutilisés. 5. Appel de `beforeEnter` dans la configuration de route. 6. Résolution des composants de route asynchrones. 7. Appel de `beforeRouteEnter` dans les composants activés. 8. Appel des interceptions `beforeResolve`. 9. Confirmation de la navigation. 10. Appel des hooks globaux `afterEach`. 11. Modification du DOM demandée. 12. Appel des fonctions de rappel passées à `next` dans l'interception `beforeRouteEnter` avec l'instance instanciée. ================================================ FILE: docs/fr/guide/advanced/scroll-behavior.md ================================================ # Comportement du défilement En utilisant le routage côté client, nous pourrions vouloir faire défiler la page jusqu'en haut lorsqu'on navigue vers une nouvelle route, ou alors préserver la position du défilement des entrées de l'historique comme le ferait une page réelle. `vue-router` vous permet de faire cela et, encore mieux, vous permet de changer le comportement du défilement pendant la navigation. **Note : cette fonctionnalité ne fonctionne que si le navigateur supporte `history.pushState`.** Pendant la création de l'instance du routeur, vous pouvez renseigner la fonction `scrollBehavior` : ``` js const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // retourner la position désirée } }) ``` La fonction `scrollBehavior` reçoit les objets de route `to` et `from`. Le troisième argument, `savedPosition`, est disponible uniquement si c'est une navigation `popstate` (déclenchée par les boutons précédent/suivant du navigateur). La fonction peut retourner un objet décrivant la position du défilement. L'objet peut être de la forme : - `{ x: number, y: number }` - `{ selector: string, offset? : { x: number, y: number }}` (offset seulement supporté pour les versions 2.6.0+) Si une valeur équivalente à `false` ou un objet vide est retourné, aucun défilement ne sera produit. Par exemple : ``` js scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } ``` Cela permettra de défiler au haut de page à chaque navigation à travers les routes. Retourner l'objet `savedPosition` résultera en un comportement quasi natif en naviguant avec les boutons précédents/suivants : ``` js scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } ``` Si vous voulez simuler le comportement « aller à l'ancre » : ``` js scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash // , offset: { x: 0, y: 10 } } } } ``` On peut aussi utiliser les [champs meta de route](meta.md) pour implémenter un contrôle bien précis pour le comportement du défilement. Allez voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). ## Défilement asynchrone > Nouveau dans la 2.8.0+ Vous pouvez également retourner une promesse pour résoudre la description de position souhaitée : ``` js scrollBehavior (to, from, savedPosition) { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ x: 0, y: 0 }) }, 500) }) } ``` Il est possible de relier les événements d'un composant de transition au niveau de la page pour que le comportement de défilement soit bien adapté à vos transitions de pages. Cependant, en raison de la variance et de la complexité des cas d'utilisation, nous fournissons simplement ce code primitif pour permettre aux utilisateurs de faire les implémentations spécifiques. ================================================ FILE: docs/fr/guide/advanced/transitions.md ================================================ # Transitions Vu que `` est essentiellement un composant dynamique, on peut lui appliquer certains effets de transitions en utilisant le composant `` : ``` html ``` [Tout à propos de ``](https://fr.vuejs.org/v2/guide/transitions.html) fonctionne également ici de la même manière. ## Transition par route L'utilisation du dessus applique la même transition pour chaque route. Si vous voulez que les composants de route aient des transitions différentes, vous pouvez utiliser à la place `` avec des noms différents à l'intérieur de chaque composant de route : ``` js const Foo = { template: `
    ...
    ` } const Bar = { template: `
    ...
    ` } ``` ## Transition dynamique basée sur la route Il est aussi possible de déterminer la transition à utiliser en se basant sur la relation entre la route cible et la route actuelle : ``` html ``` ``` js // et dans le composant parent, // observer la `$route` pour déterminer la transition à utiliser watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } } ``` Voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). ================================================ FILE: docs/fr/guide/essentials/dynamic-matching.md ================================================ # Concordance dynamique de route Vous allez très souvent associer des routes avec un motif donné à un même composant. Par exemple nous pourrions avoir le composant `User` qui devrait être rendu pour tous les utilisateurs mais avec différents identifiants. Avec `vue-router` nous pouvons utiliser des segments dynamiques dans le chemin de la route pour réaliser cela : ``` js const User = { template: '
    Utilisateur
    ' } const router = new VueRouter({ routes: [ // Les segments dynamiques commencent avec la ponctuation deux-points { path: '/utilisateur/:id', component: User } ] }) ``` Maintenant des URL comme `/utilisateur/foo` et `/utilisateur/bar` seront chacun associé à la même route. Un segment dynamique se repère avec les deux-points `:`. Quand une route concorde, la valeur du segment dynamique est exposée via `this.$route.params` dans tous les composants. Et donc, nous pouvons faire le rendu de l'identifiant de l'utilisateur courant en mettant à jour le template de `User` ainsi : ``` js const User = { template: '
    Utilisateur {{ $route.params.id }}
    ' } ``` Vous pouvez regarder un exemple en ligne [ici](https://jsfiddle.net/yyx990803/4xfa2f19/). Vous pouvez avoir plusieurs segments dynamiques pour une même route, et ils seront associés aux champs associés dans `$route.params`. Des exemples : | motif | chemin concordant | $route.params | | -------------------------------------- | ---------------------------- | ------------------------------------ | | /utilisateur/:username | /utilisateur/evan | `{ username: 'evan' }` | | /utilisateur/:username/billet/:post_id | /utilisateur/evan/billet/123 | `{ username: 'evan', post_id: 123 }` | En plus de `$route.params`, l'objet `$route` expose également d'autres informations utiles comme la `$route.query` (s'il y a une requête dans l'URL), `$route.hash`, etc. Vous pouvez accéder à tous les détails de cela dans la [référence de l'API](../../api/#the-route-object). ## Réactivité aux changements de paramètres Une chose à noter quand vous utilisez des routes avec des paramètres (segments), c'est que lors de la navigation de l'utilisateur de `/utilisateur/foo` vers `/utilisateur/bar`, **la même instance de composant va être réutilisée**. Puisque les deux routes font le rendu du même composant, cela est plus performant que de détruire l'ancienne instance et d'en créer une nouvelle. **Cependant, cela signifie également que les hooks de cycle de vie ne seront pas appelés**. Pour réagir aux changements de paramètres dans le même composant, vous pouvez simplement observer l'objet `$route` : ``` js const User = { template: '...', watch: { '$route' (to, from) { // réagir au changement de route... } } } ``` Ou utiliser la [fonction d'interception](../advanced/navigation-guards.html) `beforeRouteUpdate` introduite avec la 2.2 : ``` js const User = { template: '...', beforeRouteUpdate (to, from, next) { // réagir au changement de route... // n'oubliez pas d'appeler `next()` } } ``` ## Motifs de concordance avancés `vue-router` utilise [path-to-regexp](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0) comme moteur de concordance de chemin, il supporte donc plusieurs motifs de concordance avancés tels que la présence optionnelle de segments dynamiques, aucun ou plusieurs motifs, plus d'options par motifs, et même des motifs d'expressions régulières personnalisés. Consultez cette [documentation](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters) pour utiliser ces motifs avancés et [cet exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) pour les utiliser avec `vue-router`. ## Priorité de concordance Parfois la même URL peut être adressé par de multiples routes. Dans ce cas, la priorité de concordance est déterminée par l'ordre de la définition des routes : plus la route est définie tôt, plus sa priorité est élevée. ================================================ FILE: docs/fr/guide/essentials/history-mode.md ================================================ # Mode historique de HTML5 Le mode par défaut de `vue-router` est le _mode hash_. Il utilise la partie hash de l'URL pour simuler un URL complet et ainsi ne pas recharger la page quand l'URL change. Pour nous passer du hash, nous pouvons utiliser le **mode historique** qui utilisera l'API `history.pushState` afin de permettre une navigation sans rechargement de page : ```js const router = new VueRouter({ mode: 'history', routes: [...] }) ``` Quand vous utilisez le mode historique, l'URL ressemblera à n'importe quel URL normal. Par ex. `http://oursite.com/user/id`. Magnifique ! Cependant, un problème apparait si votre application est une application monopage cliente. Sans une configuration serveur adaptée, les utilisateurs tomberont sur une page d'erreur 404 en tentant d'accéder à `http://oursite.com/user/id` directement dans leur navigateur. Maintenant ça craint. Ne vous inquiétez pas. Pour résoudre ce problème, il vous suffit d'ajouter une route à votre serveur prenant en compte toutes les adresses demandées. Si l'URL demandée ne concorde avec aucun fichier statique, alors il doit toujours renvoyer la page `index.html` qui contient le code de votre application. De nouveau magnifique ! ## Exemple de configurations serveur ### Apache ```apache Options -MultiViews RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] ``` Au lieu de `mod_rewrite`, vous pouvez également utiliser [`FallbackResource`](https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource). ### nginx ```nginx location / { try_files $uri $uri/ /index.html; } ``` ### Node.js natif ```js const http = require('http') const fs = require('fs') const httpPort = 80 http .createServer((req, res) => { fs.readFile('index.html', 'utf-8', (err, content) => { if (err) { console.log(`Impossible d'ouvrir le fichier "index.html"`) } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }) .listen(httpPort, () => { console.log('Le serveur écoute à : http://localhost:%s', httpPort) }) ``` ### Node.js avec Express Pour Node.js avec Express, vous pouvez utiliser le [middleware connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). ### Internet Information Services (IIS) 1. Instaler [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite) 2. Créer un fichier `web.config` dans le répertoire racine de votre site avec le contenu suivant : ```xml ``` ### Caddy ``` rewrite { regexp .* to {path} / } ``` ### Hébergement Firebase Ajouter ceci à votre fichier `firebase.json` : ``` { "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } ``` ## Limitation Il y a une limitation a tout ceci. Votre serveur ne renverra plus les erreurs 404 des chemins qui ne sont pas trouvés puisqu'il va servir à présent le fichier `index.html`. Pour contourner ce problème, vous pouvez implémenter une route concordant avec toutes les adresses en 404 dans votre application Vue : ```js const router = new VueRouter({ mode: 'history', routes: [{ path: '*', component: NotFoundComponent }] }) ``` Une alternative possible, si vous utilisez un serveur Node.js, est d'implémenter ce mécanisme de substitution en utilisant le routeur côté serveur pour vérifier la concordance des demandes d'URL entrant. Si la route ne concorde avec rien, la page est inexistante. Consultez l'[utilisation de Vue côté serveur](https://ssr.vuejs.org/fr/) pour plus d'informations. ================================================ FILE: docs/fr/guide/essentials/named-routes.md ================================================ # Routes nommées Parfois il est plus pratique d'identifier une route avec un nom, tout particulièrement quand on souhaite attacher cette route ou exécuter des actions de navigation. Vous pouvez donner un nom à une route dans les options `routes` pendant la création de l'instance du routeur : ``` js const router = new VueRouter({ routes: [ { path: '/utilisateur/:userId', name: 'user', component: User } ] }) ``` Pour attacher une route nommée, vous pouvez passer un objet à la prop `to` du composant `router-link` : ``` html Utilisateur ``` C'est exactement le même objet à utiliser programmatiquement avec `router.push()` : ``` js router.push({ name: 'user', params: { userId: 123 }}) ``` Dans les deux cas, le routeur va naviguer vers le chemin `/utilisateur/123`. Un exemple complet se trouve [ici](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). ================================================ FILE: docs/fr/guide/essentials/named-views.md ================================================ # Vues nommées Parfois vous avez besoin d'afficher différentes vues en même temps plutôt que de les imbriquer, c.-à-d. créer un affichage avec une vue `sidebar` et une vue `main` par exemple. C'est ici que les routes nommées entrent en jeu. Au lieu d'avoir une seule balise de vue, vous pouvez en avoir une multitude et donner à chacune d'entre elles un nom. Un `router-view` sans nom aura comme nom par défaut : `default`. ``` html ``` Une vue est rendue en utilisant un composant, donc de multiples vues nécessitent de multiples composants pour une même route. Assurez-vous d'utiliser l'option `components` (avec un s) : ``` js const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) ``` Une démo de cet exemple peut-être trouvée [ici](https://jsfiddle.net/posva/6du90epg/). ## Vues nommées imbriquées Il est possible de créer des dispositions complexes en utilisant les vues nommées avec les vues imbriquées. Quand vous le faites, vous devez nommer les composants imbriqués de `router-view` utilisés. Voyons cela avec un panneau de configuration exemple : ``` /parametres/emails /parametres/profile +-----------------------------------+ +------------------------------+ | UserSettings | | UserSettings | | +-----+-------------------------+ | | +-----+--------------------+ | | | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | | | +-------------------------+ | | | +--------------------+ | | | | | | | | | UserProfilePreview | | | +-----+-------------------------+ | | +-----+--------------------+ | +-----------------------------------+ +------------------------------+ ``` - `Nav` est juste un composant standard. - `UserSettings` est un composant de vue. - `UserEmailsSubscriptions`, `UserProfile`, `UserProfilePreview` sont des composants de vue imbriqués. **Note** : _mettons de côté la partie HTML / CSS de cette disposition et concentrons nous sur le composant utilisé en lui-même._ La section `