diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 92119bf2c..000000000 --- a/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["env", "flow-vue"], - "plugins": ["syntax-dynamic-import"] -} diff --git a/.bithoundrc b/.bithoundrc new file mode 100644 index 000000000..29f012e54 --- /dev/null +++ b/.bithoundrc @@ -0,0 +1,14 @@ +{ + "ignore": [ + "**/node_modules/**", + "**/build/**", + "**/dist/**", + "**/examples/**", + "**/docs/**", + "**/test/unit/lib/**", + "**/lib/**" + ], + "test": [ + "**/test/**" + ] +} diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 705a68f93..000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,81 +0,0 @@ -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 diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 2b88bf081..000000000 --- a/.eslintignore +++ /dev/null @@ -1,2 +0,0 @@ -dist -*.ts diff --git a/.eslintrc b/.eslintrc index 97b7461f7..be8961c2e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,10 +1,177 @@ { - "root": true, - "plugins": [ - "flowtype" - ], - "extends": [ - "plugin:vue-libs/recommended", - "plugin:flowtype/recommended" - ] + "env": { + "browser": true, + "node": true + }, + + "ecmaFeatures": { + "arrowFunctions": true, + "destructuring": true, + "classes": true, + "defaultParams": true, + "blockBindings": true, + "modules": true, + "objectLiteralComputedProperties": true, + "objectLiteralShorthandMethods": true, + "objectLiteralShorthandProperties": true, + "restParams": true, + "spread": true, + "templateStrings": true + }, + + "rules": { + "accessor-pairs": 2, + "array-bracket-spacing": 0, + "block-scoped-var": 0, + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + "camelcase": 0, + "comma-dangle": [2, "never"], + "comma-spacing": [2, { "before": false, "after": true }], + "comma-style": [2, "last"], + "complexity": 0, + "computed-property-spacing": 0, + "consistent-return": 0, + "consistent-this": 0, + "constructor-super": 2, + "curly": [2, "multi-line"], + "default-case": 0, + "dot-location": [2, "property"], + "dot-notation": 0, + "eol-last": 2, + "eqeqeq": [2, "allow-null"], + "func-names": 0, + "func-style": 0, + "generator-star-spacing": [2, { "before": true, "after": true }], + "guard-for-in": 0, + "handle-callback-err": [2, "^(err|error)$" ], + "indent": [2, 2, { "SwitchCase": 1 }], + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "linebreak-style": 0, + "lines-around-comment": 0, + "max-nested-callbacks": 0, + "new-cap": [2, { "newIsCap": true, "capIsNew": false }], + "new-parens": 2, + "newline-after-var": 0, + "no-alert": 0, + "no-array-constructor": 2, + "no-caller": 2, + "no-catch-shadow": 0, + "no-cond-assign": 2, + "no-console": 0, + "no-constant-condition": 0, + "no-continue": 0, + "no-control-regex": 2, + "no-debugger": 2, + "no-delete-var": 2, + "no-div-regex": 0, + "no-dupe-args": 2, + "no-dupe-keys": 2, + "no-duplicate-case": 2, + "no-else-return": 0, + "no-empty": 0, + "no-empty-character-class": 2, + "no-empty-label": 2, + "no-eq-null": 0, + "no-eval": 2, + "no-ex-assign": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-extra-boolean-cast": 2, + "no-extra-parens": 0, + "no-extra-semi": 0, + "no-fallthrough": 2, + "no-floating-decimal": 2, + "no-func-assign": 2, + "no-implied-eval": 2, + "no-inline-comments": 0, + "no-inner-declarations": [2, "functions"], + "no-invalid-regexp": 2, + "no-irregular-whitespace": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-labels": 2, + "no-lone-blocks": 2, + "no-lonely-if": 0, + "no-loop-func": 0, + "no-mixed-requires": 0, + "no-mixed-spaces-and-tabs": 2, + "no-multi-spaces": 2, + "no-multi-str": 2, + "no-multiple-empty-lines": [2, { "max": 1 }], + "no-native-reassign": 2, + "no-negated-in-lhs": 2, + "no-nested-ternary": 0, + "no-new": 2, + "no-new-func": 0, + "no-new-object": 2, + "no-new-require": 2, + "no-new-wrappers": 2, + "no-obj-calls": 2, + "no-octal": 2, + "no-octal-escape": 2, + "no-param-reassign": 0, + "no-path-concat": 0, + "no-process-env": 0, + "no-process-exit": 0, + "no-proto": 0, + "no-redeclare": 2, + "no-regex-spaces": 2, + "no-restricted-modules": 0, + "no-return-assign": 2, + "no-script-url": 0, + "no-self-compare": 2, + "no-sequences": 2, + "no-shadow": 0, + "no-shadow-restricted-names": 2, + "no-spaced-func": 2, + "no-sparse-arrays": 2, + "no-sync": 0, + "no-ternary": 0, + "no-this-before-super": 2, + "no-throw-literal": 2, + "no-trailing-spaces": 2, + "no-undef": 2, + "no-undef-init": 2, + "no-undefined": 0, + "no-underscore-dangle": 0, + "no-unexpected-multiline": 2, + "no-unneeded-ternary": 2, + "no-unreachable": 2, + "no-unused-expressions": 0, + "no-unused-vars": [2, { "vars": "all", "args": "none" }], + "no-use-before-define": 0, + "no-var": 0, + "no-void": 0, + "no-warning-comments": 0, + "no-with": 2, + "object-curly-spacing": 0, + "object-shorthand": 0, + "one-var": [2, { "initialized": "never" }], + "operator-assignment": 0, + "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }], + "padded-blocks": 0, + "prefer-const": 0, + "quote-props": 0, + "quotes": [2, "single", "avoid-escape"], + "radix": 2, + "semi": [2, "never"], + "semi-spacing": 0, + "sort-vars": 0, + "space-after-keywords": [2, "always"], + "space-before-blocks": [2, "always"], + "space-before-function-paren": [2, "always"], + "space-in-parens": [2, "never"], + "space-infix-ops": 2, + "space-return-throw-case": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }], + "strict": 0, + "use-isnan": 2, + "valid-jsdoc": 0, + "valid-typeof": 2, + "vars-on-top": 0, + "wrap-iife": [2, "any"], + "wrap-regex": 0, + "yoda": [2, "never"] + } } diff --git a/.flowconfig b/.flowconfig deleted file mode 100644 index a22d5fe98..000000000 --- a/.flowconfig +++ /dev/null @@ -1,15 +0,0 @@ -[ignore] -.*/node_modules/.* -.*/test/.* -.*/dist/.* -.*/examples/.* -.*/vue/.* - -[include] - -[libs] -flow - -[options] -#unsafe.enable_getters_and_setters=true -suppress_comment= \\(.\\|\n\\)*\\$flow-disable-line diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index 355e5a7cc..000000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index 811a6cd4b..000000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/.github/funding.yml b/.github/funding.yml deleted file mode 100644 index e4c7570c1..000000000 --- a/.github/funding.yml +++ /dev/null @@ -1,2 +0,0 @@ -github: [posva, yyx990803] -open_collective: vuejs diff --git a/.github/workflows/release-tag.yml b/.github/workflows/release-tag.yml deleted file mode 100644 index 268578f3f..000000000 --- a/.github/workflows/release-tag.yml +++ /dev/null @@ -1,23 +0,0 @@ -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. diff --git a/.gitignore b/.gitignore index 7fab9dc67..8d6f37e58 100644 --- a/.gitignore +++ b/.gitignore @@ -1,17 +1,9 @@ .DS_Store node_modules -TODOs.md -test/e2e/reports -test/e2e/screenshots -selenium-debug.log -dist/*.gz -dist/*.map +coverage explorations -docs/.vuepress/dist -yarn-error.log -.idea -.vscode/settings.json -.env -selenium-server.log -local.log -browserstack.err +TODOS.md +*.log +docs/_book +dist/vue-router.min.js.gz +dist/vue-router.js.map diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 2c2c282d6..000000000 --- a/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "semi": false, - "singleQuote": true, - "printWidth": 80 -} diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 520f3ff13..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,397 +0,0 @@ -## [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)) diff --git a/LICENSE b/LICENSE index 888e2ccda..f8fc693c3 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -MIT License +The MIT License (MIT) -Copyright (c) 2013-present Evan You +Copyright (c) 2013-2016 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 @@ -9,13 +9,13 @@ 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 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. +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md index 40cba38ce..2a38e576e 100644 --- a/README.md +++ b/README.md @@ -1,123 +1,62 @@ -# 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. -> - 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). +# vue-router [![Build Status](https://img.shields.io/circleci/project/vuejs/vue-router/master.svg)](https://circleci.com/gh/vuejs/vue-router) [![npm package](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router) [![bitHound Overall Score](https://www.bithound.io/github/vuejs/vue-router/badges/score.svg)](https://www.bithound.io/github/vuejs/vue-router) [![Issue Stats](http://issuestats.com/github/vuejs/vue-router/badge/issue?style=flat)](http://issuestats.com/github/vuejs/vue-router) + +**Compatibility Note:** `vue-router` requires Vue.js 0.12.10+ and currently does not support Vue.js 2.0. + +### Introduction + +`vue-router` is the official router for [Vue.js](http://vuejs.org). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include: + +- 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 +- Restore scroll position when going back in history mode + +Get started with the [documentation](http://vuejs.github.io/vue-router). ### Development Setup -```bash +``` bash # install deps -yarn +npm install # build dist files -yarn build +npm run build -# serve examples at localhost:8080 -yarn dev +# serve example app at localhost:8080 +npm run serve-example -# lint & run all tests -yarn test +# and unit tests at localhost:8081 +npm run dev -# serve docs at localhost:8080 -yarn docs -``` +# lint & run all tests +npm test -## Releasing +# run unit tests only +npm run unit -- `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` +# run e2e tests only +npm run e2e-local +``` ## 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. +For questions and support please use the [Gitter chat room](https://gitter.im/vuejs/vue) 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. +Please make sure to read the [Issue Reporting Checklist](https://github.com/vuejs/vue/blob/dev/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. +Please make sure to read the [Contributing Guide](https://github.com/vuejs/vue/blob/dev/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). +Details changes for each release are documented in the [release notes](https://github.com/vuejs/vue-router/releases). ## Stay In Touch @@ -127,12 +66,6 @@ Details changes for each release are documented in the [`CHANGELOG.md file`](htt [MIT](http://opensource.org/licenses/MIT) -Copyright (c) 2013-present Evan You - -## Special Thanks +Copyright (c) 2013-2016 Evan You - - BrowserStack Logo - -Special thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser specific issues. diff --git a/assets/browserstack-logo-600x315.png b/assets/browserstack-logo-600x315.png deleted file mode 100644 index 5a0cea27a..000000000 Binary files a/assets/browserstack-logo-600x315.png and /dev/null differ diff --git a/bower.json b/bower.json new file mode 100644 index 000000000..9006da007 --- /dev/null +++ b/bower.json @@ -0,0 +1,25 @@ +{ + "name": "vue-router", + "homepage": "https://github.com/vuejs/vue-router", + "authors": [ + "Evan You " + ], + "description": "router for Vue.js", + "main": "dist/vue-router.js", + "moduleType": ["globals", "node", "amd"], + "keywords": [ + "vue", + "router" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "build", + "docs", + "example", + "src", + "test", + "*.yml", + "*.json" + ] +} diff --git a/build/build.js b/build/build.js index c812b7a6c..e4f30b11a 100644 --- a/build/build.js +++ b/build/build.js @@ -1,83 +1,56 @@ -const fs = require('fs') -const path = require('path') -const zlib = require('zlib') -const terser = require('terser') -const rollup = require('rollup') -const configs = require('./configs') +var fs = require('fs') +var zlib = require('zlib') +var rollup = require('rollup') +var uglify = require('uglify-js') +var babel = require('rollup-plugin-babel') +var version = process.env.VERSION || require('../package.json').version +var banner = + '/*!\n' + + ' * vue-router v' + version + '\n' + + ' * (c) ' + new Date().getFullYear() + ' Evan You\n' + + ' * Released under the MIT License.\n' + + ' */' -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() - } +rollup.rollup({ + entry: 'src/index.js', + plugins: [ + babel({ + loose: 'all' + }) + ] +}) +.then(function (bundle) { + return write('dist/vue-router.js', bundle.generate({ + format: 'umd', + banner: banner, + moduleName: 'VueRouter' + }).code) +}) +.then(function () { + return write( + 'dist/vue-router.min.js', + banner + '\n' + uglify.minify('dist/vue-router.js').code + ) +}) +.then(function () { + return new Promise(function (resolve, reject) { + fs.readFile('dist/vue-router.min.js', function (err, buf) { + if (err) return reject(err) + zlib.gzip(buf, function (err, buf) { + if (err) return reject(err) + write('dist/vue-router.min.js.gz', buf).then(resolve) }) - .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() - } + }) +}) +.catch(logError) - fs.writeFile(dest, code, err => { +function write (dest, code) { + return new Promise(function (resolve, reject) { + fs.writeFile(dest, code, function (err) { if (err) return reject(err) - if (zip) { - zlib.gzip(code, (err, zipped) => { - if (err) return reject(err) - report(' (gzipped: ' + getSize(zipped) + ')') - }) - } else { - report() - } + console.log(blue(dest) + ' ' + getSize(code)) + resolve() }) }) } diff --git a/build/ci.sh b/build/ci.sh new file mode 100644 index 000000000..12d0bcefe --- /dev/null +++ b/build/ci.sh @@ -0,0 +1,15 @@ +set -e +if [ -z "$CI_PULL_REQUEST" ] +then + npm run unit + # start sauce connect + cd sc-*-linux && ./bin/sc -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY -f ~/sc_ready & + # Wait for tunnel to be ready + while [ ! -e ~/sc_ready ]; do sleep 1; done + # serve example app + npm run serve-example & + # Run selenium tests + npm run e2e-sauce +else + npm test +fi diff --git a/build/configs.js b/build/configs.js deleted file mode 100644 index 4fbfa6d24..000000000 --- a/build/configs.js +++ /dev/null @@ -1,103 +0,0 @@ -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 -} diff --git a/build/e2e.sh b/build/e2e.sh new file mode 100644 index 000000000..ef5e2d693 --- /dev/null +++ b/build/e2e.sh @@ -0,0 +1,16 @@ +# use a different port to avoid conflicting with npm run serve +PORT=8082 + +# serve example +./node_modules/.bin/webpack-dev-server \ + --quiet --hot --history-api-fallback\ + --config example/advanced/webpack.config.js \ + --content-base example/advanced \ + --host 0.0.0.0 \ + --port $PORT & + +# run e2e tests, make sure to kill the server no matter pass or fail +PORT=$PORT ./node_modules/.bin/nightwatch \ + -c build/nightwatch.local.json \ + -e chrome,firefox \ + && kill $! || (kill $! && exit 1) diff --git a/build/karma.config.js b/build/karma.config.js new file mode 100644 index 000000000..8eecdb1ee --- /dev/null +++ b/build/karma.config.js @@ -0,0 +1,40 @@ +module.exports = function (config) { + config.set({ + browsers: ['PhantomJS'], + reporters: ['spec', 'coverage'], + frameworks: ['jasmine'], + files: ['../test/unit/specs/index.js'], + preprocessors: { + '../test/unit/specs/index.js': ['webpack', 'sourcemap'] + }, + webpack: { + devtool: '#inline-source-map', + module: { + loaders: [ + { + test: /\.js$/, + exclude: /test|node_modules|vue\/dist/, + loader: 'babel?optional[]=runtime&loose=all' + } + ], + postLoaders: [ + { + test: /\.js$/, + exclude: /test|node_modules|vue\/dist|lib\//, + loader: 'istanbul-instrumenter' + } + ] + } + }, + webpackMiddleware: { + noInfo: true + }, + singleRun: true, + coverageReporter: { + reporters: [ + { type: 'lcov', dir: '../coverage', subdir: '.' }, + { type: 'text-summary', dir: '../coverage', subdir: '.' } + ] + } + }) +} diff --git a/build/nightwatch.local.json b/build/nightwatch.local.json new file mode 100644 index 000000000..e3f3ff94f --- /dev/null +++ b/build/nightwatch.local.json @@ -0,0 +1,38 @@ +{ + "src_folders" : ["test/e2e"], + "output_folder": "coverage/e2e", + + "selenium" : { + "start_process" : true, + "server_path" : "node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.0.jar", + "host" : "127.0.0.1", + "port" : 4444, + "cli_args" : { + "webdriver.chrome.driver" : "node_modules/chromedriver/lib/chromedriver/chromedriver" + } + }, + + "test_settings" : { + "default" : { + "selenium_port": 4444, + "selenium_host": "localhost", + "silent": true + }, + + "firefox": { + "desiredCapabilities": { + "browserName": "firefox", + "javascriptEnabled": true, + "acceptSslCerts": true + } + }, + + "chrome" : { + "desiredCapabilities": { + "browserName": "chrome", + "javascriptEnabled": true, + "acceptSslCerts": true + } + } + } +} diff --git a/build/nightwatch.sauce.json b/build/nightwatch.sauce.json new file mode 100644 index 000000000..bd8075c90 --- /dev/null +++ b/build/nightwatch.sauce.json @@ -0,0 +1,47 @@ +{ + "src_folders" : ["test/e2e"], + + "test_settings" : { + "default" : { + "selenium_port": 80, + "selenium_host": "ondemand.saucelabs.com", + "username": "${SAUCE_USERNAME}", + "access_key": "${SAUCE_ACCESS_KEY}", + "silent": true + }, + + "firefox": { + "desiredCapabilities": { + "browserName": "firefox", + "javascriptEnabled": true, + "acceptSslCerts": true + } + }, + + "chrome" : { + "desiredCapabilities": { + "browserName": "chrome", + "javascriptEnabled": true, + "acceptSslCerts": true + } + }, + + "ie10": { + "desiredCapabilities": { + "browserName": "internet explorer", + "version": 10, + "javascriptEnabled": true, + "acceptSslCerts": true + } + }, + + "ie11": { + "desiredCapabilities": { + "browserName": "internet explorer", + "version": 11, + "javascriptEnabled": true, + "acceptSslCerts": true + } + } + } +} diff --git a/build/release.sh b/build/release.sh new file mode 100644 index 000000000..c86396bda --- /dev/null +++ b/build/release.sh @@ -0,0 +1,26 @@ +set -e +echo "Enter release version: " +read VERSION + +read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r +echo # (optional) move to a new line +if [[ $REPLY =~ ^[Yy]$ ]] +then + echo "Releasing $VERSION ..." + + # run tests + npm test 2>/dev/null + + # build + VERSION=$VERSION npm run build + + # # commit + git add -A + git commit -m "[build] $VERSION" + npm version $VERSION --message "[release] $VERSION" + + # # publish + git push origin refs/tags/v$VERSION + git push + npm publish +fi diff --git a/build/rollup.dev.config.js b/build/rollup.dev.config.js deleted file mode 100644 index 996fc2042..000000000 --- a/build/rollup.dev.config.js +++ /dev/null @@ -1,3 +0,0 @@ -const { input, output } = require('./configs')[0] - -module.exports = Object.assign({}, input, { output }) diff --git a/build/update-docs.sh b/build/update-docs.sh new file mode 100644 index 000000000..321ede90e --- /dev/null +++ b/build/update-docs.sh @@ -0,0 +1,10 @@ +cd docs +rm -rf _book +gitbook build +cp assets/circle.yml _book/circle.yml +cp assets/CNAME _book/CNAME +cd _book +git init +git add -A +git commit -m 'update book' +git push -f git@github.com:vuejs/vue-router.git master:gh-pages diff --git a/build/webpack.dev.config.js b/build/webpack.dev.config.js new file mode 100644 index 000000000..cd5f40b73 --- /dev/null +++ b/build/webpack.dev.config.js @@ -0,0 +1,19 @@ +module.exports = { + entry: './src/index.js', + output: { + path: './dist', + filename: 'vue-router.js', + library: 'VueRouter', + libraryTarget: 'umd' + }, + module: { + loaders: [ + { + test: /.js/, + exclude: /node_modules|vue\/dist/, + loader: 'babel?optional[]=runtime&loose=all' + } + ] + }, + devtool: '#source-map' +} diff --git a/circle.yml b/circle.yml new file mode 100644 index 000000000..54bcde5f3 --- /dev/null +++ b/circle.yml @@ -0,0 +1,17 @@ +machine: + node: + version: 5 + +general: + branches: + ignore: + - dev + +dependencies: + post: + - wget https://saucelabs.com/downloads/sc-latest-linux.tar.gz + - tar -xzf sc-latest-linux.tar.gz + +test: + override: + - bash ./build/ci.sh diff --git a/composables.d.ts b/composables.d.ts deleted file mode 100644 index 790fbfba8..000000000 --- a/composables.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './types/composables' diff --git a/composables.js b/composables.js deleted file mode 100644 index 18d96d549..000000000 --- a/composables.js +++ /dev/null @@ -1,257 +0,0 @@ -/*! - * 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 - - -
-

Hello App!

-

- - - - Go to Foo - Go to Bar -

- - - -
-``` - -### JavaScript - -``` js -// 0. Wenn du ein Modul-System wie Webpack oder Browserify benutzt (z. B. via vue-cli), importiere Vue sowie VueRouter und rufe Vue.use(VueRouter) auf. - -// 1. Definiere die Route-Komponenten -// Diese können auch aus anderen Dateien importiert werden. -const Foo = { template: '
foo
' } -const Bar = { template: '
bar
' } - -// 2. Definiere ein paar Routes -// Jede Route sollte mit einer Komponente verbunden sein. -// Die Komponenente kann entweder eine tatsächliche Komponente sein, die via Vue.extend() erstellt wird -// oder lediglich ein Optionsobjekt der Komponenente. -// Hinweis: Verschachtelte (engl: "nested") Routes werden später in dieser Anleitung behandelt. - -const routes = [ - { path: '/foo', component: Foo }, - { path: '/bar', component: Bar } -] - -// 3. Erstelle die Router-Instanz und füge ihr die `routes`-Option hinzu. -// Es gibt ntürlich noch mehr Optionen, aber hier halten wir es erstmal einfach. - -const router = new VueRouter({ - routes // kurz für 'routes: routes' -}) - -// 4. Erstelle und mounte die Root-Instanz. -// Stelle sicher, dass der Router mit der `router` option an die Root Instanz übergeben wird, damit er später überall in deiner App zur Verfügung steht. - -const app = new Vue({ - router -}).$mount('#app') - -// Die App ist nun gestartet. -``` -Das ganze gibt es natürlich auch als [Live-Beispiel](http://jsfiddle.net/yyx990803/xgrjzsup/). - -Hinweis: `` erhält automatisch die CSS-Klasse `.router-link-active`, wenn die aktuelle Route im Browser der des router-link entspricht. Mehr Infos dazu in der [API-Referenz](../api/router-link.md). diff --git a/docs-gitbook/de/essentials/history-mode.md b/docs-gitbook/de/essentials/history-mode.md deleted file mode 100644 index 4f4c7c681..000000000 --- a/docs-gitbook/de/essentials/history-mode.md +++ /dev/null @@ -1,60 +0,0 @@ -# HTML5-Verlaufsmodus ("History Mode") - -Der Standardmodus für `vue-router` ist der _Hash-Modus_. Er nutzt den URL-Hash, um eine komplette URL zu simulieren, damit die Seite nicht neu geladen wird, wenn sich die URL ändert. - -Um ohne Hash zu arbeiten, nutzt man den **Verlaufsmodus**, welcher die `history.pushState`-API von HTML5 nutzt, um URL-Navigation ohne Reload zu erreichen: - -``` js -const router = new VueRouter({ - mode: 'history', - routes: [...] -}) -``` - -Bei Nutzung des Verlaufsmodus sieht die URL "normal" aus, zB. `http://meine-seite.de/benutzer/id` - Wunderschön! - -Es gibt jedoch ein Problem: Da unsere App eine so genannte "Single Page Application (SPA)" ist, die komplett im Browser läuft, erhält der Nutzer einen 404-Fehler, wenn er `http://meine-seite.de/benutzer/id` direkt aufruft - denn unter diesem Pfad wird dein Webserver nichts finden. - -Aber keine Sorge: Um dieses Problem zu beheben, musst du nur eine einzige "catch-all"-Route in deiner Serverkonfiguration ergänzen. Wenn die URL zu keiner statischen Datei gehört, sollte diese Route immer die `index.html` an den Browser senden, in der deine App läuft ist. - -## Beispiel einer Serverkonfiguration - -#### Apache - -```apache - - RewriteEngine On - RewriteBase / - RewriteRule ^index\.html$ - [L] - RewriteCond %{REQUEST_FILENAME} !-f - RewriteCond %{REQUEST_FILENAME} !-d - RewriteRule . /index.html [L] - -``` - -#### nginx - -```nginx -location / { - try_files $uri $uri/ /index.html; -} -``` - -#### Node.js (Express) - -Für Node.js/Express benutz du am besten [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback). - -## Warnung - -Es gibt einen kleinen Nachteil: Der Server wird keine 404-Fehler mehr melden, da alle nicht gefundenen Pfade zur `index.html` führen. Um das zu beheben, solltest du eine Sammel-Route in der Vue-App für die 404-Seite definieren. - -``` js -const router = new VueRouter({ - mode: 'history', - routes: [ - { path: '*', component: NotFoundComponent } - ] -}) -``` - -Alternativ kann man bei einem Node.js-Server den Fallback nutzen, indem man das serverseitige Router-System den 404-Fehler ausgeben lässt, sollte die URL auf keine Route treffen, die deine Vue-App kennt. diff --git a/docs-gitbook/de/essentials/named-routes.md b/docs-gitbook/de/essentials/named-routes.md deleted file mode 100644 index d78cc1d9f..000000000 --- a/docs-gitbook/de/essentials/named-routes.md +++ /dev/null @@ -1,32 +0,0 @@ -# Benannte Routes - -Manchmal ist es einfacher, eine Route mit einem Namen anzusprechen. Besonders bei Links zu einer Route oder dem Ausführen von Navigationen. Den Namen vergibt man beim Erzeugen der Router-Instanz in den `routes`-Optionen: - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/user/:userId', - name: 'user', - component: User - } - ] -}) -``` - -Um mit `router-link` zu einer benannten Route zu verlinken, gibt man ein Objekt in die `to`-Prop ein: - -``` html -User -``` - -Das exakt gleiche Objekt kann auch programmatisch in `router.push()` genutzt werden. - - -``` js -router.push({ name: 'user', params: { userId: 123 }}) -``` - -In beiden Fällen wird der Router zum Pfad `/user/123` navigieren. - -Vollständiges Beispiel [hier](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). diff --git a/docs-gitbook/de/essentials/named-views.md b/docs-gitbook/de/essentials/named-views.md deleted file mode 100644 index fe8cfd350..000000000 --- a/docs-gitbook/de/essentials/named-views.md +++ /dev/null @@ -1,29 +0,0 @@ -# Benannte Views - -Manchmal muss man mehrere Views zur selben Zeit darstellen, anstatt sie zu verschachteln. Zum Beispiel bei einem Layout mit Hauptteil und Seitenleiste. Hier sind benannte Views nützlich. Anstelle eines einzigen Outlets für die View-Darstellung gibt es mehrere, die Namen tragen können. Ein `router-view` ohne Namen heißt standardmäßig `default`. - -``` html - - - -``` - -Ein View wird durch eine Komponente gerendert, deswegen benötigen mehrere Views auch mehrere Komponenten für dieselbe Route. Dabei ist es wichtig, `components` (Plural) in den Optionen zu verwenden: - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/', - components: { - default: Foo, - a: Bar, - b: Baz - } - } - ] -}) -``` - -Eine Demo zu diesem Beispiel ist -[hier](https://jsfiddle.net/posva/6du90epg/) zu finden. diff --git a/docs-gitbook/de/essentials/navigation.md b/docs-gitbook/de/essentials/navigation.md deleted file mode 100644 index 4880f9021..000000000 --- a/docs-gitbook/de/essentials/navigation.md +++ /dev/null @@ -1,70 +0,0 @@ -# Programmatische Navigation - -Neben `router-link` für deklarative Links in Templates, können wir mit Hilfe der Methoden der Router-Instanz programmatisch navigieren. - -#### `router.push(location, onComplete?, onAbort?)` - -Um zu einer anderen URL zu navigieren, nutzt man `router.push`. Diese Methode "pusht" einen neuen Eintrag in den Browser-Verlauf, sodass der Nutzer, wenn er die Zurück-Schaltfläche des Browsers betätigt, zur vorherigen URL zurückkehrt. - -Das ist dieselbe Methode, die intern aufgerufen wird, wenn wir auf einen `` klicken. Das Anlicken von `` ist also das Äquivalent zu `router.push(...)`. - -| Deklarativ | Programmatisch | -|-------------|--------------| -| `` | `router.push(...)` | - -Das Argument kann ein Pfad als String oder eine Beschreibung des Ziels (der "location") als Objekt sein. - -``` js -// String -router.push('home') - -// Objekt -router.push({ path: 'home' }) - -// benannte ("named") Route -router.push({ name: 'user', params: { userId: 123 }}) - -// mit Query, resultiert in /register?plan=private -router.push({ path: 'register', query: { plan: 'private' }}) -``` - -In Version 2.2.0 können wir optional `onComplete` und `onAbort` Callbacks als zweites und drittes Argument angeben. Diese Callbacks werden jeweilse aufgerufen, wenn die Navigation entweder erfolgreich abgeschlossen wurde (nachdem alle asynchronen hooks durchlaufen wurden), oder wenn sie abgerochen wurde (weil eine neue Navigation zu derselben oder einer anderen Route gestartet wurde, z.B. durch einen Klick, bevor die aktuelle Navigation beendet werden konnte). - -#### `router.replace(location, onComplete?, onAbort?)` - -Dise methode verhält sich wie `router.push`, allerdings erstellt sie keinen neuen Eintrag im Browser-Verlauf. Sie ersetzt lediglich den aktuellen Eintrag. - -| Deklarativ | Programmatisch | -|-------------|--------------| -| `` | `router.replace(...)` | - - -#### `router.go(n)` - -Diese Methode akzeptiert einen einfachen Integer als Parameter, der angibt, wie viele Schritte im Browser-Verlauf vor- oder rückwärts zu gehen sind - ähnlich wie `window.history.go(n)`. - -Beispiele - -``` js -// gehe einen Eintrag vorwärts - wie history.forward() -router.go(1) - -// gehe einen Eintrag zurück - wie history.back() -router.go(-1) - -// gehe drei Einträge vor -router.go(3) - -// scheitert ohne Nachricht, wenn nicht genügend Einträge vorhanden sind -router.go(-100) -router.go(100) -``` - -#### Manipulation des Verlaufs - -Vielleicht ist dir aufgefallen, dass `router.push`, `router.replace` und `router.go` Gegenstücke von [`window.history.pushState`, `window.history.replaceState` und `window.history.go`](https://developer.mozilla.org/de/docs/Web/API/History) sind und sie die `window.history`-API imitieren. - -Das macht es einfach, den Verlauf zu manipulieren, wenn man sich mit den [Browser-Verlauf-APIs](https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history) -auskennt. - -Erwähnenswert ist, dass Navigationsmethoden von `vue-router` (`push`, `replace`, `go`) in allen router modes (`history`, `hash`, `abstract`) genau gleich funktionieren. diff --git a/docs-gitbook/de/essentials/nested-routes.md b/docs-gitbook/de/essentials/nested-routes.md deleted file mode 100644 index 19a21e2ae..000000000 --- a/docs-gitbook/de/essentials/nested-routes.md +++ /dev/null @@ -1,102 +0,0 @@ -# Verschachtelte Routes - -Echte App-UIs bestehen normalerweise aus Komponenten, die mehrere Ebenen tief verschachtelt sind. Und es ist durchaus üblich, dass die Segmente der URL die Struktur der Verschachtelung wiederspiegeln, zum Beispiel so: - -``` -/user/foo/profile /user/foo/posts -+------------------+ +-----------------+ -| User | | User | -| +--------------+ | | +-------------+ | -| | Profile | | +------------> | | Posts | | -| | | | | | | | -| +--------------+ | | +-------------+ | -+------------------+ +-----------------+ -``` - -Mit `vue-router` können wir derartige Beziehungen sehr leicht mit einer verschachtelten (englisch: "nested") Route-Konfiguration abbilden. - -Wir bauen auf der App auf, die im letzten Kapitel erstellt wurde: - -``` html -
- -
-``` - -``` js -const User = { - template: '
User {{ $route.params.id }}
' -} - -const router = new VueRouter({ - routes: [ - { path: '/user/:id', component: User } - ] -}) -``` - -Die `router-view` Komponente ist das Outlet der obersten Ebene. Sie rendert die Komponenten, welche zu Routes der obersten Ebene gehören. Eine dort gerenderte Komponente kann selbst wiederum eine `router-view` Komponente enthalten. Wenn wir zum Beispiel eine `router-view` Komponente im Template der User-Komponente platzieren, sieht das so aus: - -``` js -const User = { - template: ` -
-

User {{ $route.params.id }}

- -
- ` -} -``` - -Um Komponenten in diesem verschachtelten Outlet zu rendern, müssen wir die `children`-Option in der Konfiguration des `VueRouter`-Konstruktors verwenden. - -``` js -const router = new VueRouter({ - routes: [ - { path: '/user/:id', component: User, - children: [ - { - // UserProfile wird innerhalb der - // von User gerendert, - // wenn '/user/:id/profile' gematched wird. - path: 'profile', - component: UserProfile - }, - { - // UserPosts wird innerhalb der - // von User gerendert, - // wenn '/user/:id/posts' gematched wird. - path: 'posts', - component: UserPosts - } - ] - } - ] -}) -``` - -**Hinweis: Verschachtelte Pfade, die mit `/` starten, werden als "root-path" (zu deutsch: "Wurzel-Pfad") behandelt. Damit kann man eine verschachtelte Route mit einem direkten Pfad erreichen, ohne dass die verschachtelten Pfadsegmente der übergeordneten Routes enthalten sein müssen.** - -Wie du sieht, ist die `children`-Option nur eine weiteres Array mit Route-Konfigurationsobjekten - wie das `routes`-Array selbst. Daher können wir Views so oft ineinander verschachteln, wie wir möchten. - -Wenn du nun aber mit mit der aktuellen Konfiguration `/user/foo` aufrufst, wird nichts im `router-view` Outlet von `User` gerendert, da keine Sub-Route gematched wurde. Wollen wir in dem Fall dennoch eine Komponente rendern, erreichen wir das ganz einfach mit einer Route im `children`-Array, die einen leeren String als Pfad hat: - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/user/:id', component: User, - children: [ - // UserHome wird in - // von User gerendert, - // wenn /user/:id zutrifft. - { path: '', component: UserHome }, - - // ...weitere Sub-Routes - ] - } - ] -}) -``` - -Eine Demo dazu findest du [hier](http://jsfiddle.net/yyx990803/L7hscd8h/) diff --git a/docs-gitbook/de/essentials/redirect-and-alias.md b/docs-gitbook/de/essentials/redirect-and-alias.md deleted file mode 100644 index 02e210b96..000000000 --- a/docs-gitbook/de/essentials/redirect-and-alias.md +++ /dev/null @@ -1,59 +0,0 @@ -# Redirect und Alias - -### Redirect (Umleitung) - -Ein Redirect bedeutet, dass, wenn der Nutzer `/a` besucht, die URL mit `/b` ersetzt wird und auch die Komponente der Route zu `/b` rendert. Das kann in der `routes`-Konfiguration folgendermaßen eingestellt werden: - - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', redirect: '/b' } - ] -}) -``` - -Der Redirect kann auch auf eine benannten Route angewandt werden: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', redirect: { name: 'foo' }} - ] -}) -``` - -Oder auch mit einer Funktion für dynamische Redirects: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', redirect: to => { - // Die Funktion erhält die Ziel-Route als Argument - // und gibt den Umleitungsort/-pfad hier aus. - }} - ] -}) -``` - -Für erweiterte Anwendungsmöglichkeiten siehe auch dieses [Beispiel](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). - -### Alias - -Ein Redirect bedeutet: Wenn wir die URL `/a` besuchen, wird die URL mit `/b` ersetzt und dann mit der Route für `/b` gematched. Aber was ist dann ein *Alias*? - -Ein Alias von `/a` als `/b` bedeutet, dass die URL `/b` bleibt, wenn diese besucht wird, jedoch die Komponente von `/a` gerendert wird. - -Dieses kann man in der Router-Konfiguration folgendermaßen definieren: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', component: A, alias: '/b' } - ] -}) -``` - -Ein Alias biete die Möglichkeit, eine bestimmte UI-Struktur einer beliebigen URL zuzuordnen, anstatt von der verschachtelten Struktur der Konfiguration eingeschränkt zu werden. - -Für die erweiterte Anwendung siehe folgendes [Beispiel](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js). diff --git a/docs-gitbook/de/installation.md b/docs-gitbook/de/installation.md deleted file mode 100644 index dec299411..000000000 --- a/docs-gitbook/de/installation.md +++ /dev/null @@ -1,45 +0,0 @@ -# Installation - -### Direkter Download / CDN - -[https://unpkg.com/vue-router](https://unpkg.com/vue-router) - - -[Unpkg.com](https://unpkg.com) bietet NPM-basierte CDN-Links an. Der obige Link führt immer zur aktuellsten Version auf NPM. Eine genaue Version kann via URL genutzt werden: `https://unpkg.com/vue-router@2.0.0`. - - -Füge `vue-router` nach Vue ein und es installiert sich automatisch selbst: - -``` html - - -``` - -### NPM - -``` bash -npm install vue-router -``` - -Wenn ein Module-System genutzt wird (z.B. Webpack, Browserify), muss der Router explizit via `Vue.use()` installiert werden: - -``` js -import Vue from 'vue' -import VueRouter from 'vue-router' - -Vue.use(VueRouter) -``` - -Wenn globale Skript-Tags genutzt werden ist das nicht notwendig. - -### Dev Build (Entwicklungs-Version) - -Wenn die aktuelle Dev-Version genutzt werden soll, muss das Repository direkt von GitHub geklont und die aktuelle `vue-router`-Build selbst erstellt werden, . - - -``` bash -git clone https://github.com/vuejs/vue-router.git node_modules/vue-router -cd node_modules/vue-router -npm install -npm run build -``` diff --git a/docs-gitbook/es/README.md b/docs-gitbook/es/README.md deleted file mode 100644 index f8a898044..000000000 --- a/docs-gitbook/es/README.md +++ /dev/null @@ -1 +0,0 @@ -{% include "./SUMMARY.md" %} diff --git a/docs-gitbook/es/SUMMARY.md b/docs-gitbook/es/SUMMARY.md deleted file mode 100644 index 0974c1796..000000000 --- a/docs-gitbook/es/SUMMARY.md +++ /dev/null @@ -1,41 +0,0 @@ -# vue-router - -> Notas: vue-router@2.x funciona solamente con Vue 2.x. La documentación para la versión 0.7.x está [aquí (en inglés)](https://github.com/vuejs/vue-router/tree/1.0/docs/en). - -**[Notas de lanzamiento](https://github.com/vuejs/vue-router/releases)** - -- [Instalación](installation.md) -- Esenciales - - [Primeros pasos](essentials/getting-started.md) - - [Matching dinámico de rutas](essentials/dynamic-matching.md) - - [Sub-rutas](essentials/nested-routes.md) - - [Navegación mediante código](essentials/navigation.md) - - [Rutas con nombre](essentials/named-routes.md) - - [Vistas con nombre](essentials/named-views.md) - - [Redireccionamiento y alias](essentials/redirect-and-alias.md) - - [Pasando propiedades a componentes de ruteo](essentials/passing-props.md) - - [Modo historial HTML5](essentials/history-mode.md) -- Avanzado - - [Guardias de navegación](advanced/navigation-guards.md) - - [Campos Meta en las rutas](advanced/meta.md) - - [Transiciones](advanced/transitions.md) - - [Obtención de datos](advanced/data-fetching.md) - - [Comportamiento del scroll](advanced/scroll-behavior.md) - - [Lazy loading](advanced/lazy-loading.md) -- API - - [Opciones del constructor de Router](api/options.md) - - [rutas](api/options.md#routes) - - [modo](api/options.md#mode) - - [base](api/options.md#base) - - [linkActiveClass](api/options.md#linkactiveclass) - - [linkExactActiveClass](api/options.md#linkexactactiveclass) - - [scrollBehavior](api/options.md#scrollbehavior) - - [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery) - - [fallback](api/options.md#fallback) - - [La instancia de Router](api/router-instance.md) - - [Propiedades](api/router-instance.md#properties) - - [Métodos](api/router-instance.md#methods) - - [El objeto Route](api/route-object.md) - - [Inyección en componentes](api/component-injections.md) - - [router-link](api/router-link.md) - - [router-view](api/router-view.md) diff --git a/docs-gitbook/es/advanced/data-fetching.md b/docs-gitbook/es/advanced/data-fetching.md deleted file mode 100644 index 7d34b0d7f..000000000 --- a/docs-gitbook/es/advanced/data-fetching.md +++ /dev/null @@ -1,110 +0,0 @@ -# Obtención de datos - -A veces es necesario obtener datos del servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puedes obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: - -- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Puedes mostrar un indicador de carga mientras se obtienen los datos. - -- **Obtener la información antes de la navegación**: Obtén los datos antes de la navegación en la guardia de entrada de la ruta, y realiza la navegación una vez estos obtenidos. - -Técnicamente, ambas opciones son válidas - todo depende de la experiencia de usuario a la que apuntes. - -## Obtener la información después de la navegación - -Cuando utilizamos este enfoque, navegamos y renderizamos el componente entrante inmediatamente, y obtenemos los datos en el _hook_ `created` del componente. Esto nos permite mostrar un indicador de estado de carga mientras se obtiene la información desde un servidor remoto, y también manejar la carga de datos según la ruta. - -Asumamos que tenemos un componente `Post` que necesita obtener datos de un _post_ basándose en `$route.params.id`: - -``` html - -``` - -``` js -export default { - data () { - return { - loading: false, - post: null, - error: null - } - }, - created () { - // obtén los datos cuando la vista es creada y _data_ ya - // está siendo observada - this.fetchData() - }, - watch: { - // ejecuta nuevamente el método si la ruta cambia - '$route': 'fetchData' - }, - methods: { - fetchData () { - this.error = this.post = null - this.loading = true - // reemplaza getPost con lo que corresponda - getPost(this.$route.params.id, (err, post) => { - this.loading = false - if (err) { - this.error = err.toString() - } else { - this.post = post - } - }) - } - } -} -``` - -## Obtener la información antes de la navegación - -Con este enfoque, obtenemos la información antes de navegar a la nueva ruta. Podemos obtener los datos en el guardia `beforeRouteEnter` del componente entrante, y solo ejecutar `next` cuando se haya completado: - -``` 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)) - }) - }, - // cuando la ruta cambie y este componente ya haya sido renderizado, - // la lógica será ligeramente diferente - 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 - } - } - } -} -``` - -El usuario permanecerá en la vista anterior mientras se esté obteniendo el recurso para la vista entrante. Por lo tanto, es recomendable mostrar algún tipo de indicador o barra de progreso. Si la obtención de datos falla, es necesario mostrar algún tipo de advertencia global. diff --git a/docs-gitbook/es/advanced/lazy-loading.md b/docs-gitbook/es/advanced/lazy-loading.md deleted file mode 100644 index 69c0b4a1b..000000000 --- a/docs-gitbook/es/advanced/lazy-loading.md +++ /dev/null @@ -1,44 +0,0 @@ -# Lazy loading - -Cuando se construyen aplicaciones con un sistema de empaquetamiento de módulos, el archivo JavaScript resultante puede terminar siendo muy grande, afectando los tiempos de carga de la página. Sería más eficiente si pudiesemos dividir los componentes de cada ruta en porciones separadas y cargarlas solo cuando esa ruta es visitada. - -Combinando [las características asíncronas de componentes de Vue](http://vuejs.org/guide/components.html#Async-Components) y las características de división de código de [Webpack](https://webpack.js.org/guides/code-splitting-require/), es trivial el _lazy loading_ de componentes de ruta. - -Todo lo que necesitamos es definir nuestros componentes de rutas como asíncronos: - -``` js -const Foo = resolve => { - // require.ensure es la sintaxis especial de Webpack para indicar un punto de división de código. - require.ensure(['./Foo.vue'], () => { - resolve(require('./Foo.vue')) - }) -} -``` - -Hay una alternativa a la sintaxis de división de código utilizando _require_ como lo hace AMD, por lo que puede simplificarse como: - -``` js -const Foo = resolve => require(['./Foo.vue'], resolve) -``` - -Nada debe cambiarse en la configuración del _router_, solo utiliza `Foo` como lo harías normalmente: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/foo', component: Foo } - ] -}) -``` - -### Agrupando componentes en la misma porción - -A veces deseamos agrupar todos los componentes bajo la misma ruta en la misma porción asíncrona. Para lograr esto, necesitamos usar [porciones con nombre](https://webpack.js.org/guides/code-splitting-require/#chunkname) proveyendo un nombre de porción a `require.ensure` como el tercer argumento: - -``` js -const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') -const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') -const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') -``` - -Webpack agrupará los módulos asíncronos con el mismo nombre dentro de la misma porción asíncrona - esto también significa que no necesitamos más listar explícitamente las dependencias de `require.ensure` (por lo tanto pasamos un array vacío). diff --git a/docs-gitbook/es/advanced/meta.md b/docs-gitbook/es/advanced/meta.md deleted file mode 100644 index feed2f7d1..000000000 --- a/docs-gitbook/es/advanced/meta.md +++ /dev/null @@ -1,51 +0,0 @@ -# Campos Meta en las rutas - -Puedes incluir un campo `meta` cuando definas una ruta: - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/foo', - component: Foo, - children: [ - { - path: 'bar', - component: Bar, - // campo meta - meta: { requiresAuth: true } - } - ] - } - ] -}) -``` - -Entonces, ¿como accedemos al campo `meta`? - -Primero, cada objeto route en la configuración de `routes` se llama **registro de ruta**. Los registros de ruta pueden estar anidados. Por lo tanto, cuando una ruta coincida, existe la posibilidad que lo haga con más de un registro de ruta. - -Por ejemplo, con la configuración anterior, la URL `/foo/bar` coincidirá tanto con el registro de ruta padre como con el hijo. - -Todos los registros de rutas que hayan coincidido son expuestos en el objeto `$route` (y también a los objetos route en las guardias de navegación) como el array `$route.matched`. Por ende, necesitaremos iterar sobre `$route.matched` para verificar campos meta en los registros de rutas. - -Un caso de uso de ejemplo es verificar la existencia de campos metas en los guardias de navegación global: - -``` js -router.beforeEach((to, from, next) => { - if (to.matched.some(record => record.meta.requiresAuth)) { - // esta ruta requiere autenticación, verificamos que haya iniciado sesión - // sino, redirigimos a la página de inicio de sesión. - if (!auth.loggedIn()) { - next({ - path: '/login', - query: { redirect: to.fullPath } - }) - } else { - next() - } - } else { - next() // ¡Asegúrate de ejecutar next siempre! - } -}) -``` diff --git a/docs-gitbook/es/advanced/navigation-guards.md b/docs-gitbook/es/advanced/navigation-guards.md deleted file mode 100644 index 4f6dbf416..000000000 --- a/docs-gitbook/es/advanced/navigation-guards.md +++ /dev/null @@ -1,134 +0,0 @@ -# Guardias de navegación - -Como el nombre sugiere, las guardias de navegación provistas por `vue-router` son básicamente utilizadas para proteger rutas de navegación ya sea redireccionando o cancelándolas. Hay varias maneras de engancharse en el proceso de navegación de rutas: globalmente, por ruta o dentro de los componentes. - -Recuerda: **Los cambios en los parámetros o las _queries_ no harán que se ejecuten los guardias de navegación**. Simplemente [observa el objeto `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) para poder reaccionar frente a esos cambios o utiliza el guardia `beforeRouteUpdate` en el componente. - -### Guardias globales - -Puedes registrar guardias _before_ globales utilizando `router.beforeEach`: - -``` js -const router = new VueRouter({ ... }) - -router.beforeEach((to, from, next) => { - // ... -}) -``` - -Las guardias _before_ globales son llamadas por orden de creación, cuando una navegación comienza. Las guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** hasta que todos los _hooks_ sean resueltos. - -Cada función guardia recibe tres argumentos: - -- **`to: Route`**: el [Objeto Route](../api/route-object.md) hacia donde se navega. - -- **`from: Route`**: la ruta actual desde la cual se navega. - -- **`next: Function`**: esta función debe ser ejecutada para **resolver** el _hook_. La acción a realizar depende de los argumentos provistos a `next`: - - - **`next()`**: moverse al siguiente _hook_ en la cadena. Si no queda ninguno, la navegación se **confirma**. - - - **`next(false)`**: cancelar la navegación actual. Si la URL en el navegador cambió (ya sea manualmente o a través del botón _atrás_), será reseteada al valor de la ruta `from`. - - - **`next('/')` o `next({ path: '/' })`**: redirecciona a una ruta diferente. La navegación actual será abortada y una nueva será iniciada. - - - **`next(error)`**: (2.4.0+) si el argumento pasado a `next` es una instancia de `Error`, la navegación se abortará y el error será pasado a las _funciones callback_ registradas a través de `router.onError()`. - -**Asegúrese de llamar siempre a la función `next`, sino el _hook_ nunca será resuelto.** - -### Guardias de resolución globales - -> Nuevo en 2.5.0 - -A partir de la versión 2.5.0 puedes registrar un guardia global con `router.beforeResolve`. Esto es similar a `router.beforeEach`, con la diferencia que los guardias de resolución serán llamados justo antes de que la navegación sea confirmada, **después que todos los guardias en el componente y los componentes de rutas asíncronos sean resueltos**. - -### Post _hooks_ globales - -También puedes registrar _hooks_ globales que se ejecutarán después de que la navegación sea confirmada. Sin embargo, a diferencia de los guardias, estos _hooks_ no reciben una función `next` y no pueden afectar la navegación: - -``` js -router.afterEach((to, from) => { - // ... -}) -``` - -### Guardias por ruta - -Puedes definir guardias `beforeEnter` directamente en el objeto de configuración de una ruta: - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/foo', - component: Foo, - beforeEnter: (to, from, next) => { - // ... - } - } - ] -}) -``` - -Estos guardias tienen exactamente la misma firma que los guardias _before_ globales. - -### Guardias en componentes - -Por último, puedes directamente definir guardias de navegación dentro de los componentes de ruta (los que son pasados a la configuración del `router`) con las siguientes opciones: - -- `beforeRouteEnter` -- `beforeRouteUpdate` (agregado en la versión 2.2) -- `beforeRouteLeave` - -``` js -const Foo = { - template: `...`, - beforeRouteEnter (to, from, next) { - // se llama antes que la ruta que renderiza este componente sea confirmada. - // NO tiene acceso a la instancia del componente `this`, - // ¡porque no ha sido creada todavía cuando este guardia es ejecutado! - }, - beforeRouteUpdate (to, from, next) { - // se llama cuando la ruta que renderiza este componente ha cambiado, - // pero este componente es reusado en la nueva ruta. - // Por ejemplo, para una ruta con parámetros dinámicos /foo/:id, cuando - // navegamos desde /foo/1 havia /foo/2, la misma instancia del componente Foo - // será reusada, y este _hook_ será llamado cuando eso suceda. - // Tiene acceso a la instancia del componente `this` - }, - beforeRouteLeave (to, from, next) { - // se llama cuando la ruta que renderiza el componente está por ser - // abandonada. - // Tiene acceso a la instancia del componente `this` - } -} -``` - -La guardia `beforeRouteEnter` **NO** tiene acceso a `this`, porque es ejecutada antes que la navegación sea confirmada, por lo tanto el componente destino todavía no ha sido creado. - -Sin embargo, puedes acceder a la instancia pasando una _función callback_ a `next`. La _función callback_ se ejecutará cuando la navegación sea confirmada, y la instancia del componente será pasada como argumento: - -``` js -beforeRouteEnter (to, from, next) { - next(vm => { - // accede a la instancia del componente a través de `vm` - }) -} -``` - -Puedes acceder directamente a `this` dentro de `beforeRouteLeave`. La guardia _leave_ se utiliza normalmente para prevenir al usuario cuando intenta abandonar la ruta accidentalmente sin guardar cambios. La navegación puede ser cancelada ejecutando `next(false)`. - -### El flujo de resolución de navegación completo - -1. Se dispara la navegación. -2. Se llaman a los guardias _leave_ en los componentes desactivados. -3. Se llaman a los guardias `beforeEach` globales. -4. Se llaman a los guardias `beforeRouteUpdate` en los componentes reutilizados (2.2+). -5. Se llama a `beforeEnter` en las configuraciones de rutas. -6. Se resuelven componentes de rutas asíncronos. -7. Se llama a `beforeRouteEnter` en los componentes activados. -8. Se llama a los guardias globales `beforeResolve` (2.5+). -9. Se confirma la navegación. -10. Se llaman a los _hook_ globales`afterEach`. -11. Se disparan las actualizaciones del DOM. -12. Se llaman a las _funciones callback_ pasadas a `next` en los guardias `beforeRouteEnter` con las instancias creadas. diff --git a/docs-gitbook/es/advanced/scroll-behavior.md b/docs-gitbook/es/advanced/scroll-behavior.md deleted file mode 100644 index a5c2c3668..000000000 --- a/docs-gitbook/es/advanced/scroll-behavior.md +++ /dev/null @@ -1,62 +0,0 @@ -# Comportamiento del scroll - -Cuando se utiliza enrutamiento del lado cliente, podemos querer hacer `scroll` hacia el inicio de la página cuando naveguemos a una nueva ruta, o preservar la posición actual, tal cual lo hace una recarga de la página. `vue-router` te permite lograr esto e incluso más: permite personalizar completamente el comportamiento del `scroll` durante la navegación. - -**Nota: esta característica solo funciona en el modo historial de HTML5.** - -Cuando crees una instancia del `router`, puedes incluir la función `scrollBehavior`: - -``` js -const router = new VueRouter({ - routes: [...], - scrollBehavior (to, from, savedPosition) { - // devolver la posición deseada - } -}) -``` - -La función `scrollBehavior` recibe los objetos de ruta `to` y `from`. El tercer parámetro, `savedPosition`, solo está disponible si estamos en una navegación `popstate` (cuando se utilizan los botones _atrás_ o _adelante_ en el navegador). - -La función puede devolver un objeto de posición de `scroll`. El objeto puede ser de la forma: - -- `{ x: number, y: number }` -- `{ selector: string, offset? : { x: number, y: number }}` (offset solo soportado a partir de la versión 2.6.0+) - -Si se devuelve un valor *falso* o un objeto vacio, no ocurrirá ningún desplazamiento. - -Por ejemplo: - -``` js -scrollBehavior (to, from, savedPosition) { - return { x: 0, y: 0 } -} -``` - -Esto hará que la página se desplace hacia el inicio para todas las navegaciones a la ruta. - -Devolver `savedPosition` hará que el comportamiento cuando se utilicen los botones _atrás_ o _adelante_ sea el nativo: - -``` js -scrollBehavior (to, from, savedPosition) { - if (savedPosition) { - return savedPosition - } else { - return { x: 0, y: 0 } - } -} -``` - -Si deseas simular el `scroll` hacia anclas: - -``` js -scrollBehavior (to, from, savedPosition) { - if (to.hash) { - return { - selector: to.hash - // , offset: { x: 0, y: 10 } - } - } -} -``` - -También podemos utilizar [campos meta](meta.md) para implementar un control de `scroll` fino. Un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). diff --git a/docs-gitbook/es/advanced/transitions.md b/docs-gitbook/es/advanced/transitions.md deleted file mode 100644 index 17af3ff45..000000000 --- a/docs-gitbook/es/advanced/transitions.md +++ /dev/null @@ -1,58 +0,0 @@ -# Transiciones - -Dado que `` es esencialmente un componente dinámico, podemos aplicarle efectos de transición utilizando el componente ``: - -``` html - - - -``` - -[Todo acerca de ``](http://vuejs.org/guide/transitions.html) también funciona aquí. - -### Transiciones por ruta - -El ejemplo anterior aplicará la misma transición a todas las rutas. Si deseas que cada componente de ruta tenga diferentes transiciones, puedes utilizar `` con diferentes nombres dentro de cada componente de ruta: - -``` js -const Foo = { - template: ` - -
...
- - ` -} - -const Bar = { - template: ` - -
...
- - ` -} -``` - -### Transiciones dinámicas basadas en componentes - -También es posible determinar dinámicamente la transición a utilizar basado en las relaciones entre la ruta destino y la ruta actual: - -``` html - - - - -``` - -``` js -// luego, en el componente padre, -// observa $route para determinar que transición utilizar -watch: { - '$route' (to, from) { - const toDepth = to.path.split('/').length - const fromDepth = from.path.split('/').length - this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' - } -} -``` - -Tienes un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). diff --git a/docs-gitbook/es/api/component-injections.md b/docs-gitbook/es/api/component-injections.md deleted file mode 100644 index 686ddf716..000000000 --- a/docs-gitbook/es/api/component-injections.md +++ /dev/null @@ -1,21 +0,0 @@ -# Inyección en componentes - -### Propiedades inyectadas - -Estas propiedades son inyectadas dentro de cada componente hijo pasando la instancia del `router` a la instancia principal como la opción `router`. - -- #### $router - - La instancia del `router`. - -- #### $route - - El objeto [Route activo](route-object.md). Esta propiedad es de solo lectura y sus propiedades son inmutables, pero puede ser observada. - -### Opciones habilitadas - -- **beforeRouteEnter** -- **beforeRouteUpdate** (agregado en 2.2) -- **beforeRouteLeave** - - Más información en [guardias en componentes](../advanced/navigation-guards.md#incomponent-guards). diff --git a/docs-gitbook/es/api/options.md b/docs-gitbook/es/api/options.md deleted file mode 100644 index 36cfa4f71..000000000 --- a/docs-gitbook/es/api/options.md +++ /dev/null @@ -1,102 +0,0 @@ -# Opciones del constructor de Router - -### routes - -- tipo: `Array` - - Declaración de tipos para `RouteConfig`: - - ``` js - declare type RouteConfig = { - path: string; - component?: Component; - name?: string; // para rutas con nombre - components?: { [name: string]: Component }; // para vistas con nombre - redirect?: string | Location | Function; - props?: boolean | string | Function; - alias?: string | Array; - children?: Array; // para sub-rutas - beforeEnter?: (to: Route, from: Route, next: Function) => void; - meta?: any; - - // 2.6.0+ - caseSensitive?: boolean; // utilizar o no matcheo case sensitive (valor por defecto: false) - pathToRegexpOptions?: Object; // Opciones path-to-regexp para compilar expresiones regulares - } - ``` - -### mode - -- tipo: `string` - -- valor por defecto: `"hash" (en navegadores) | "abstract" (en Node.js)` - -- valores disponibles: `"hash" | "history" | "abstract"` - - Configura el modo del `router`. - - - `hash`: utiliza el _hash_ en la URL para el enrutamiento. Funciona en todos los navegadores que soportan Vue, incluidos aquellos que no soportan la API de historial de HTML5 . - - - `history`: requiere la API de historial de HTML y configuración del lado servidor. [Modo historial HTML5](../essentials/history-mode.md). - - - `abstract`: funciona en todos los ambientes de JavaScript, por ejemplo, del lado servidor con Node.js. **Se forzará este modo de trabajo en el router si no se detecta la API de navegador.** - -### base - -- tipo: `string` - -- valor por defecto: `"/"` - - La URL base para la aplicación. Por ejemplo, si toda la aplicación se encuentra dentro de `/app/`, entonces `base` debería llevar ese valor. - -### linkActiveClass - -- tipo: `string` - -- valor por defecto: `"router-link-active"` - - Configura globalmente la clase activa por defecto de ``. Más información en [router-link](router-link.md). - -### linkExactActiveClass - -> 2.5.0+ - -- tipo: `string` - -- valor por defecto: `"router-link-exact-active"` - - Configura globalmente la clase activa de `` para coincidencias de rutas exactas. Más información en [router-link](router-link.md). - -### scrollBehavior - -- tipo: `Function` - - Firma: - - ``` - ( - to: Route, - from: Route, - savedPosition?: { x: number, y: number } - ) => { x: number, y: number } | { selector: string } | ?{} - ``` - - Para más detalles, [comportamiento del scroll](../advanced/scroll-behavior.md). - -### parseQuery / stringifyQuery - -> 2.4.0+ - -- tipo: `Function` - - Provee funciones parse / stringify para _query string_ personalizadas. Sobreescribe la función por defecto. - -### fallback - -> 2.6.0+ - -- tipo: `boolean` - - Controla si el router debe o no utilizar el modo `hash` cuando el navegador no soporte `history.pushState`. El valor por defecto es `true`. - - Configurar esto como `false` hace que cada navegación a través de `router-link` sea una recarga completa de la página en IE9. Esto es útil cuando la aplicación es renderizada en el servidor y necesita funcionar en IE9, porque las URL en modo hash no funcionan con SSR. diff --git a/docs-gitbook/es/api/route-object.md b/docs-gitbook/es/api/route-object.md deleted file mode 100644 index 4aaae4fc0..000000000 --- a/docs-gitbook/es/api/route-object.md +++ /dev/null @@ -1,89 +0,0 @@ -# El objeto Route - -Un **objeto Route** representa el estado de la ruta activa actualmente. Contiene información analizada de la URL actual y los **registros de rutas** que coinciden con ella. - -El objeto `Route` es inmutable. Cada navegación exitosa resultará en un nuevo objeto `Route`. - -El objeto `Route` puede encontrarse en diferentes lugares. - -- Dentro de los componentes, como `this.$route` - -- Dentro de las _funciones callbacks_ de observación de `$route` - -- Como valor de retorno de la función `router.match(location)` - -- Dentro de las guardias de navegación como los primeros dos argumentos: - - ``` js - router.beforeEach((to, from, next) => { - // to y from son objetos de ruta - }) - ``` - -- Dentro de la función `scrollBehavior`como los primeros dos argumentos: - - ``` js - const router = new VueRouter({ - scrollBehavior (to, from, savedPosition) { - // to y from son objetos de ruta - } - }) - ``` - -### Propiedades del objeto Route - -- **$route.path** - - - tipo: `string` - - Una cadena de texto equivalente a la ruta actual, siempre resuelta como una ruta absoluta. Por ejemplo`"/foo/bar"`. - -- **$route.params** - - - tipo: `Object` - - Un objeto que contiene pares llave/valor de segmentos dinámicos y segmentos estrella. Si no hay parametros, el valor será un objeto vacio. - -- **$route.query** - - - tipo: `Object` - - Un objeto que contiene pares llave/valor del _query string_. Por ejemplo, para la ruta `/foo?user=1`, obtendremos `$route.query.user == 1`. Si no hay _query string_ el valor será un objeto vacio. - -- **$route.hash** - - - tipo: `string` - - El _hash_ de la ruta actual (con la `#`), si posee. Si no hay un _hash_ el valor será una cadena de texto vacia. - -- **$route.fullPath** - - - tipo: `string` - - La URL completa incluyendo _query_ y _hash_. - -- **$route.matched** - - - tipo: `Array` - - Un array que contiene **registros de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el array de configuración `routes` (y en los arrays `children`): - - ``` js - const router = new VueRouter({ - routes: [ - // el siguiente objeto es un registro de ruta - { path: '/foo', component: Foo, - children: [ - // este también es un registro de ruta - { path: 'bar', component: Bar } - ] - } - ] - }) - ``` - - Cuando la URL es `/foo/bar`, `$route.matched` será un array que contendrá ambos objetos (clonados), en orden descendente de padre a hijo. - -- **$route.name** - - El nombre de la ruta acutal, si tiene. (Más información en [rutas con nombre](../essentials/named-routes.md)) diff --git a/docs-gitbook/es/api/router-instance.md b/docs-gitbook/es/api/router-instance.md deleted file mode 100644 index 9f9675cbf..000000000 --- a/docs-gitbook/es/api/router-instance.md +++ /dev/null @@ -1,85 +0,0 @@ -# La instancia de Router - -### Propiedades - -#### router.app - -- tipo: `Vue instance` - - La instancia principal de Vue donde `router` fue inyectado. - -#### router.mode - -- tipo: `string` - - El [modo](options.md#mode) que `router` está utilizando. - -#### router.currentRoute - -- tipo: `Route` - - La ruta actual representada como un [objeto Route](route-object.md). - -### Métodos - -- **router.beforeEach(guard)** -- **router.beforeResolve(guard)** (2.5.0+) -- **router.afterEach(hook)** - - Agrega guardias de navegación globales. Info: [guardias de navegación](../advanced/navigation-guards.md). - - A partir de la versión 2.5.0 los tres métodos devuelven una función que elimina el guardia/hook registrado. - -- **router.push(location, onComplete?, onAbort?)** -- **router.replace(location, onComplete?, onAbort?)** -- **router.go(n)** -- **router.back()** -- **router.forward()** - - Navega mediante código a una nueva URL. Info: [navegación mediante código](../essentials/navigation.md). - -- **router.getMatchedComponents(location?)** - - Devuelve un array de componentes (definiciones/constructores, no instancias) que coincidan con la ubicación provista o la ruta actual. Se utiliza principalmente durante el renderizado del lado servidor para realizar precarga de datos. - -- **router.resolve(location, current?, append?)** - - > 2.1.0+ - - Resolución inversa de URL. Dada una ubicación de la misma forma que las usadas en ``, devuelve un objeto con las siguiente propiedades: - - ``` js - { - location: Location; - route: Route; - href: string; - } - ``` - -- **router.addRoutes(routes)** - - > 2.2.0+ - - Agrega dinámicamente más rutas al `router`. El argumento debe ser un array utilizando el mismo formato de configuración que las opciones del constructor de `routes`. - -- **router.onReady(callback, [errorCallback])** - - > 2.2.0+ - - Este método pone una _función callback_ en espera a ser llamada cuando el `router` haya completado la navegación inicial, lo cual significa que ya ha resuelto todos los _hooks_ de entrada asíncronos y los componentes asíncronos asociados con la ruta inicial. - - Esto es útil en el renderizado del lado servidor para asegurar un resultado consistente tanto en el servidor como en el cliente. - - El segundo argumento, `errorCallback`, solo es soportado a partir de la versión 2.4. Será llamado cuando la resolución de ruta inicial devuelva un error (por ejemplo, cuando falla la resolución de un componente asíncrono). - -- **router.onError(callback)** - - > 2.4.0+ - - Registra una _función callback_ la cual será llamada cuando un error es capturado durante la navegación. Ten en cuenta que sucederá solo en las siguientes situaciones: - - - El error es lanzado sincrónicamente dentro de una función de guardia de ruta; - - - El error es capturado y manejado asíncronamente llamando a `next(err)` dentro de una función de guardia de ruta; - - - El error ocurre cuando se intenta resolver un componente asíncrono que es necesario para renderizar una ruta. diff --git a/docs-gitbook/es/api/router-link.md b/docs-gitbook/es/api/router-link.md deleted file mode 100644 index 009fe01e3..000000000 --- a/docs-gitbook/es/api/router-link.md +++ /dev/null @@ -1,138 +0,0 @@ -# `` - -`` es el componente para posibilitar la navegación de los usuarios en una aplicación con el `router` habilitado. La ubicación destino se especifica con la propiedad `to`. Por defecto, renderiza una etiqueta `` con el atributo `href` correspondiente, pero puede configurarse mediante la propiedad `tag`. Además, el enlace obtiene una clase CSS cuando la ruta a la que apunta es activada. - -Es preferible utilizar `` en lugar de escribir directamente `` por las siguientes razones: - -- Funciona de la misma manera tanto en el modo _hash_ como en el modo historial de HTML5, por lo que si decides intercambiar modos, o cuando el `router` utiliza el modo _hash_ en IE9, no deberás modificar nada. - -- En el modo historial de HTML5, `router-link` interceptará el evento _click_ para que el navegador no intente recargar la página. - -- Cuando estés utilizando la opción `base` en el modo historial de HTML5, no necesitas incluirla en la URL de la propiedad `to`. - -### Propiedades - -- **to** - - - tipo: `string | Location` - - - requerida - - Identifica la ruta destino del enlace. Cuando es accedida, el valor de la propiedad `to` será pasado a `router.push()` internamente, por lo que el valor puede ser tanto una cadena de texto como un objeto descriptor de ubicación. - - ``` html - - Home - - Home - - - Home - - - Home - - - Home - - - User - - - Register - ``` - -- **replace** - - - tipo: `boolean` - - - valor por defecto: `false` - - Establecer la propiedad `replace` ejecutará `router.replace()` en lugar de `router.push()` cuando se acceda, por lo que la navegación no dejará un registro en el historial. - - ``` html - - ``` - -- **append** - - - tipo: `boolean` - - - valor por defecto: `false` - - Establecer la propiedad `append` hará que se agregue la ruta relativa a la ruta actual. Por ejemplo, asumiendo que estamos navegando desde `/a` a un enlace relativo `b`, sin `append` accederemos a `/b`, pero con `append` accederemos a `/a/b`. - - ``` html - - ``` - -- **tag** - - - tipo: `string` - - - valor por defecto: `"a"` - - A veces puede que quieras que `` se renderice como otra etiqueta, por ejemplo `
  • `. Puedes utilizar la propiedad `tag` para especificar que etiqueta renderizar, y seguirá escuchando eventos _click_ para la navegación. - - ``` html - foo - -
  • foo
    • - ``` - -- **active-class** - - - tipo: `string` - - - valor por defecto: `"router-link-active"` - - Configura la clase CSS que se aplicará al enlace cuando este activo. Nota que el valor por defecto puede ser configurado de manera global a través de la opción `linkActiveClass` del constructor del `router`. - -- **exact** - - - tipo: `boolean` - - - valor por defecto: `false` - - El comportamiento por defecto para la aplicación de la clase CSS activa en matching dinámico de rutas es **inclusivo**. Por ejemplo, `` obtendrá la clase CSS mientras la ruta actual comience con `/a/` o sea `/a`. - - Una consecuencia de esto es que `` ¡permanecerá activa para todas las rutas! Para forzar un matching exacto, utiliza la propiedad `exact`: - - ``` html - - - ``` - - Más ejemplos explicando la clase activa [aquí](https://jsfiddle.net/8xrk1n9f/). - -- **event** - - > 2.1.0+ - - - tipo: `string | Array` - - - valor por defecto: `'click'` - - Son los eventos que permiten lanzar la navegacion. - -- **exact-active-class** - - > 2.5.0+ - - - tipo: `string` - - - valor por defecto: `"router-link-exact-active"` - - Configura la clase CSS activa que será aplicada cuando el enlace esté activo con una coincidencia de ruta exacta. Ten en cuenta que el valor por defecto también puede configurarse globalmente a través de la opción `linkExactActiveClass` del constructor del router. - -### Aplicar la clase activa al elemento envolvente. - -A veces puede que queramos que la clase activa se aplique al elemento envolvente en lugar de aplicarla directamente a la etiqueta ``. En ese caso, puedes renderizar el elemento envolvente utilizando `` y luego una etiqueta `` dentro: - -``` html - - /foo - -``` - -En este caso, la etiqueta `` será el enlace (y obtendrá el atributo `href` correcto), pero la clase activa será aplicada al elemento envolvente `
  • `. diff --git a/docs-gitbook/es/api/router-view.md b/docs-gitbook/es/api/router-view.md deleted file mode 100644 index fb5b63ecd..000000000 --- a/docs-gitbook/es/api/router-view.md +++ /dev/null @@ -1,27 +0,0 @@ -# `` - -El componente `` es un componente funcional que renderiza a otro en base a la ruta seleccionada. Los componentes renderizados en `` pueden contener su propio ``, el cual renderizará componentes para sub-rutas. - -### Propiedades - -- **name** - - - tipo: `string` - - - valor por defecto: `"default"` - - Cuando un componente `` tiene un nombre, renderizará el componente con el nombre correspondiente en la opción `components` del registro de ruta que coincida. Accede a [vistas con nombre](../essentials/named-views.md) para más información. - -### Comportamiento - -Cualquier propiedad diferente a `name` será pasada al componente renderizado. De cualquier manera, la mayor parte del tiempo los datos de la ruta están contenidos dentro de los parámetros de la ruta. - -Dado que es simplemente un componente, funciona con `` y ``. Cuando utilices ambos en conjunto, asegúrate de usar `` dentro de ``: - -``` html - - - - - -``` diff --git a/docs-gitbook/es/essentials/dynamic-matching.md b/docs-gitbook/es/essentials/dynamic-matching.md deleted file mode 100644 index a7593d314..000000000 --- a/docs-gitbook/es/essentials/dynamic-matching.md +++ /dev/null @@ -1,74 +0,0 @@ -# Matching dinámico de rutas - -Es bastante común tener que mapear rutas con un patrón determinado al mismo componente. Por ejemplo, puede que tengamos un componente `User` el cual debería ser renderizado para todos los usuarios, pero con diferente ID. En `vue-router` podemos usar un segmento dinámico en el _path_ para lograrlo: - -``` js -const User = { - template: '
    User
    ' -} - -const router = new VueRouter({ - routes: [ - // los segmentos dinámicos comienzan con dos puntos - { path: '/user/:id', component: User } - ] -}) -``` - -Ahora, las URL como `/user/foo` y `/user/bar` mapearán a la misma ruta. - -Un segmento dinámico se representa mediante dos puntos `:`. Cuando se encuentra una coincidencia en la ruta, el valor del segmento dinámico se expondrá como `this.$route.params` en cada componente. Por lo tanto, podremos renderizar el ID del usuario actual modificando el template de `User`de la siguiente manera: - -``` js -const User = { - template: '
    User {{ $route.params.id }}
    ' -} -``` - -Puedes consultar el siguiente [ejemplo](http://jsfiddle.net/yyx990803/4xfa2f19/). - -Se pueden tener múltiples segmentos dinámicos en la misma ruta, y todos serán mapeados a los correspondientes campos en `$route.params`. Por ejemplo: - -| patrón | matching de ruta | $route.params | -|---------|------|--------| -| /user/:username | /user/evan | `{ username: 'evan' }` | -| /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: '123' }` | - -Además de `$route.params`, el objeto `$route` expone más información útil, como `$route.query` (si hay alguna _query_ en la URL), `$route.hash`, etc. Puedes verificar todos los detalles en la documentación de la [API](../api/route-object.md). - -### Reaccionando ante cambios de los parámetros - -Una cosa a tener en cuenta cuando se usan rutas con parámetros es que cuando el usuario navega de `/user/foo` a `/user/bar`, **la misma instancia del componente será reutilizada**. Dado que ambas rutas renderizan el mismo componente, esto es más eficiente que destruir la instancia anterior y crear una nueva. **Sin embargo, esto significa que los hooks del ciclo de vida del componentes no serán emitidos**. - -Para detectar cambios en los parámetros en el mismo componente, puedes observar el objeto `$route`: - -``` js -const User = { - template: '...', - watch: { - '$route' (to, from) { - // Código que responde al cambio - } - } -} -``` - -O utiliza el guardia de navegación `beforeRouteUpdate` introducido en la versión 2.2: - -``` js -const User = { - template: '...', - beforeRouteUpdate (to, from, next) { - // Código que responde al cambio - // no olvides ejecutar next() - } -} -``` - -### Patrones de matching avanzados - -`vue-router` usa [path-to-regexp](https://github.com/pillarjs/path-to-regexp) como su motor de búsqueda de patrones, por lo que soporta varios patrones de matching avanzados tales como segmentos dinámicos opcionales, requerimientos del tipo cero o más / uno o más, e incluso patrones _regex_ personalizados. Verifica la [documentación](https://github.com/pillarjs/path-to-regexp#parameters) para estos patrones avanzados, y [este ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) de como usarlos con `vue-router`. - -### Prioridad en el matching de patrones - -A veces la misma URL puede coincidir con múltiples rutas. En ese caso, la prioridad se determina por el orden de la definición de las rutas: la primera ruta definida será la que tenga mayor prioridad. diff --git a/docs-gitbook/es/essentials/getting-started.md b/docs-gitbook/es/essentials/getting-started.md deleted file mode 100644 index e146d44f4..000000000 --- a/docs-gitbook/es/essentials/getting-started.md +++ /dev/null @@ -1,68 +0,0 @@ -# Primeros pasos - -> Utilizaremos [ES2015](https://github.com/lukehoban/es6features) en el código de los ejemplos en esta guía. - -Crear una aplicación de una sola página (SPA por sus siglas en inglés) con Vue.js + vue-router es muy sencillo. Con Vue.js, ya estamos estructurando nuestra aplicación con componentes. Cuando agregamos vue-router, todo lo que debemos hacer es mapear nuestros componentes a las rutas e informar a vue-router donde renderizarlas. Aquí hay un ejemplo básico: - -> Todos los ejemplos utilizarán la versión independiente de Vue para hacer posible el análisis de plantillas. Más detalles [aquí](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only). - -### HTML - -``` html - - - -
    -

    Hello App!

    -

    - - - - Go to Foo - Go to Bar -

    - - -
    -``` - -### JavaScript - -``` js -// 0. Si utilizas un sistema de empaquetamiento de módulos (por ejemplo, a través de vue-cli), importa Vue y VueRouter y luego ejecuta Vue.use(VueRouter). - -// 1. Define componentes de enrutamiento. -// Estos pueden ser importados desde otros archivos -const Foo = { template: '
    foo
    ' } -const Bar = { template: '
    bar
    ' } - -// 2. Define algunas rutas -// Cada ruta debe mapear a un componente. El "componente" puede -// ser un constructor de componente creado a través de -// Vue.extend(), o simplemente un objeto de opciones de componente. -// Más tarde hablaremos acerca de las sub-rutas. -const routes = [ - { path: '/foo', component: Foo }, - { path: '/bar', component: Bar } -] - -// 3. Crea una instancia del _router_ y pasa la opción `routes` -// Puedes pasar opciones adicionales aquí, -// pero mantengámoslo simple por el momento. -const router = new VueRouter({ - routes // forma corta para routes: routes -}) - -// 4. Crea y monta la instancia principal. -// Asegúrate de inyectar el _router_ con la opcion router para -// garantizar que toda la aplicación tenga acceso al mismo. -const app = new Vue({ - router -}).$mount('#app') - -// ¡Ahora la aplicación está ejecutándose! -``` - -Puedes consultar este [ejemplo](http://jsfiddle.net/yyx990803/xgrjzsup/). - -Nota que `` obtiene automáticamente la clase `.router-link-active` cuando la ruta a la que apunta es accedida. Puedes leer más acerca de eso en la documentación de la [API](../api/router-link.md). diff --git a/docs-gitbook/es/essentials/history-mode.md b/docs-gitbook/es/essentials/history-mode.md deleted file mode 100644 index f89b473ae..000000000 --- a/docs-gitbook/es/essentials/history-mode.md +++ /dev/null @@ -1,60 +0,0 @@ -# Modo historia HTML5 - -El modo por defecto para `vue-router` es _hash mode_ - el cual utiliza una almohadilla para simular la URL completa para que la página no sea recargada cuando la URL cambia. - -Para eliminar la almohadilla, podemos seleccionar el **modo historia** del `router`, el cual utiliza el método `history.pushState` de la API para conseguir una navegación sin recarga de página: - -``` js -const router = new VueRouter({ - mode: 'history', - routes: [...] -}) -``` - -Cuando utilices el modo historial, la URL lucirá "normal", por ejemplo: `http://oursite.com/user/id`. ¡Hermoso! - -Sin embargo, hay un problema: dado que nuestra aplicación es de una sola página del lado cliente, sin una configuración apropiada del lado servidor los usuarios van a obtener errores 404 si intentan acceder directamente a `http://oursite.com/user/id` en sus navegadores. Eso es horrible. - -No hay problema: para solucionar el error, todo lo que debes hacer es agregar un redireccionamiento en tu servidor. Si la URL no coincide con ningún recurso estático, debes apuntar a la misma página `index.html` donde se encuentra tu aplicación. De nuevo, ¡Hermoso! - -## Ejemplos de configuraciones de servidores - -#### Apache - -```apache - - RewriteEngine On - RewriteBase / - RewriteRule ^index\.html$ - [L] - RewriteCond %{REQUEST_FILENAME} !-f - RewriteCond %{REQUEST_FILENAME} !-d - RewriteRule . /index.html [L] - -``` - -#### nginx - -```nginx -location / { - try_files $uri $uri/ /index.html; -} -``` - -#### Node.js (Express) - -Para Node.js/Express, considera utilizar el middleware [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). - -## Deventajas - -Hay una deventaja para esto: tu servidor ya no reportará errores 404 dado que todas las rutas no encontradas serán redireccionadas al archivo `index.html`. Para solucionar este problema debes implementar dentro de la aplicación Vue una ruta por defecto para mostrar una página de error 404: - -``` js -const router = new VueRouter({ - mode: 'history', - routes: [ - { path: '*', component: NotFoundComponent } - ] -}) -``` - -Otra solución, si utilizas un servidor Node.js, es utilizar el `router` del lado del servidor para analizar las URL ingresadas y responder con un error 404 si ninguna ruta coincide. diff --git a/docs-gitbook/es/essentials/named-routes.md b/docs-gitbook/es/essentials/named-routes.md deleted file mode 100644 index 222e953eb..000000000 --- a/docs-gitbook/es/essentials/named-routes.md +++ /dev/null @@ -1,31 +0,0 @@ -# Rutas con nombre - - A veces es conveniente identificar una ruta con un nombre, especialmente cuando enlazamos a esa ruta o navegamos mediante código. Puedes darle un nombre a una ruta en las opciones de `routes` cuando se crea la instancia de Router: - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/user/:userId', - name: 'user', - component: User - } - ] -}) -``` - -Para enlazar a una ruta con nombre, puedes pasar un objeto a la propiedad `to` del componente `router-link`: - -``` html -User -``` - -Este es exactamente el mismo objeto utilizado mediante código con `router.push()`: - -``` js -router.push({ name: 'user', params: { userId: 123 }}) -``` - -En ambos casos, el _router_ navegará a la ruta `/user/123`. - -Revisa un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). diff --git a/docs-gitbook/es/essentials/named-views.md b/docs-gitbook/es/essentials/named-views.md deleted file mode 100644 index e82a34e1d..000000000 --- a/docs-gitbook/es/essentials/named-views.md +++ /dev/null @@ -1,28 +0,0 @@ -# Vistas con nombre - -A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anidarlas. Por ejemplo, cuando se crea una plantilla con una vista `sidebar` y una vista `main`. Aquí es cuando las vistas con nombre se vuelven útiles. En lugar de tener un solo _outlet_ en tu vista, puedes tener varios y darle a cada uno un nombre diferente. Por defecto, un `router-view` sin nombre se llamará `default`. - -``` html - - - -``` - -Una vista se renderiza utilizando un componente, por lo tanto, múltiples vistas requerirán múltiples componentes para la misma ruta. Asegúrate de utilizar la opción `components` (con una _s_ al final): - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/', - components: { - default: Foo, - a: Bar, - b: Baz - } - } - ] -}) -``` - -Puedes ver una demostración de este ejemplo [aquí](https://jsfiddle.net/posva/6du90epg/). diff --git a/docs-gitbook/es/essentials/navigation.md b/docs-gitbook/es/essentials/navigation.md deleted file mode 100644 index 70f2e4a41..000000000 --- a/docs-gitbook/es/essentials/navigation.md +++ /dev/null @@ -1,71 +0,0 @@ -# Navegación mediante código - -Además de utilizar `` para crear etiquetas `a` para una navegación declarativa, podemos hacer lo mismo a través de código usando los métodos de la instancia del enrutador. - -#### `router.push(location, onComplete?, onAbort?)` - -**Nota: Dentro de una instancia de Vue, tienes acceso a la instancia del router a través de `$router`. Por lo tanto puedes llamar a `this.$router.push`.** - -Para navegar a una URL diferente, utiliza `router.push`. Este método agrega una nueva entrada a la pila del historial, por lo que cuando el usuario presione el botón _volver_ del navegador, será llevado a la URL anterior. - -Este método es el que se llama internamente cuando se hace clic en un componente ``, por lo que`` es el equivalente a ejecutar `router.push(...)`. - -| Declarativo | Mediante código | -|-------------|--------------| -| `` | `router.push(...)` | - -El argumento puede ser una cadena de texto o un objeto descriptor. Por ejemplo: - -``` js -// cadena de texto literal -router.push('home') - -// Objeto -router.push({ path: 'home' }) - -// Ruta con nombre -router.push({ name: 'user', params: { userId: 123 }}) - -// Con _query_, con lo que se obtiene /register?plan=private -router.push({ path: 'register', query: { plan: 'private' }}) -``` - -A partir de la version 2.2.0+, puedes opcionalmente pasar _funciones callbacks_ `onComplete` y `onAbort` a `router.push` o `router.replace` como segundo y tercer argumento. Estas _funciones callbacks_ serán ejecutadas cuando la navegación sea completada exitosamente (luego que todos los _hooks_ asíncronos sean resueltos), o abortada (navegando a la misma ruta, o a una ruta diferente antes que la navegación actual haya finalizado), respectivamente. - -#### `router.replace(location, onComplete?, onAbort?)` - -Actúa como `router.push`, la única diferencia es que navega sin agregar una nueva entrada al historial, como su nombre sugiere - reemplaza la entrada actual. - -| Declarativo | Mediante código | -|-------------|--------------| -| `` | `router.replace(...)` | - - -#### `router.go(n)` - -Este método toma un entero como parámetro que indica cuantos pasos avanzar o retroceder en el historial, similar a `window.history.go(n)`. - -Ejemplos - -``` js -// Ir hacia adelante un paso, similar a history.forward() -router.go(1) - -// Ir hacia atrás un paso, similar a history.back() -router.go(-1) - -// Ir 3 pasos hacia adelante -router.go(3) - -// Falla silenciosamente si no existe esa cantidad de registros en el historial -router.go(-100) -router.go(100) -``` - -#### Manipulación del historial - -Seguramente notaste que `router.push`, `router.replace` y `router.go` son contra partes de [`window.history.pushState`, `window.history.replaceState` y `window.history.go`](https://developer.mozilla.org/en-US/docs/Web/API/History), y que imitan a las API de `window.history`. - -Por lo tanto, si estás familiarizado con las [API del historial del navegador](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipularlo será muy sencillo con vue-router. - -Vale la pena mencionar que los métodos de navegacion de vue-router (`push`, `replace`, `go`) funcionan consistentemente en todos los modos de trabajo del `router` (`history`, `hash` y `abstract`). diff --git a/docs-gitbook/es/essentials/nested-routes.md b/docs-gitbook/es/essentials/nested-routes.md deleted file mode 100644 index 0a57ce116..000000000 --- a/docs-gitbook/es/essentials/nested-routes.md +++ /dev/null @@ -1,99 +0,0 @@ -# Sub-rutas - -Las interfaces de usuario (UI por sus siglas en inglés) de aplicaciones reales normalmente están compuestas por componentes que están anidados varios niveles. Es también muy común que los segmentos de una URL correspondan a cierta estructura de componentes anidados, por ejemplo: - -``` -/user/foo/profile /user/foo/posts -+------------------+ +-----------------+ -| User | | User | -| +--------------+ | | +-------------+ | -| | Profile | | +------------> | | Posts | | -| | | | | | | | -| +--------------+ | | +-------------+ | -+------------------+ +-----------------+ -``` - -Con `vue-router` es muy sencillo expresar esta relación usando configuraciones de sub-rutas. - -Dada la aplicación que creamos en el capítulo anterior: - -``` html -
    - -
    -``` - -``` js -const User = { - template: '
    User {{ $route.params.id }}
    ' -} - -const router = new VueRouter({ - routes: [ - { path: '/user/:id', component: User } - ] -}) -``` - -Aquí, `` es un contenedor de nivel superior. Renderiza el componente que coincida con una ruta de nivel superior. Así, un componente renderizado puede contener su propio `` anidado. Por ejemplo, si agregamos uno dentro de la plantilla del componente `User`: - -``` js -const User = { - template: ` -
    -

    User {{ $route.params.id }}

    - -
    - ` -} -``` - -Para renderizar componentes dentro de este contenedor anidado, necesitamos usar la opción `children` en la configuración del constructor de `VueRouter`: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/user/:id', component: User, - children: [ - { - // UserProfile será renderizado en el dentro de User - // cuando /user/:id/profile coincida - path: 'profile', - component: UserProfile - }, - { - // UserPosts será renderizado en el dentro de User - // cuando /user/:id/posts coincida - path: 'posts', - component: UserPosts - } - ] - } - ] -}) -``` - -**Nota que las sub-rutas que empiecen con `/` serán tratadas como absolutas. Esto permite aprovechar el anidamiento de componentes sin tener que usar URL anidadas.** - -Como puedes ver, la opción `children` es simplemente otro array de objetos de configuración de rutas, como `routes`. Por lo tanto, puedes anidar tantas vistas como necesites. - -En este punto, con la configuración anterior, cuando visites `/user/foo`, nada será renderizado dentro del contenedor de `User` porque ninguna sub ruta coincidió. Tal vez quieras renderizar algo ahí. En ese caso, puedes pasar una sub ruta vacía: - -``` js -const router = new VueRouter({ - routes: [ - { - path: '/user/:id', component: User, - children: [ - // UserHome será renderizado en el dentro de User - // cuando /user/:id coincida - { path: '', component: UserHome }, - - // ...otras sub rutas - ] - } - ] -}) -``` - -Puedes encontrar una demostración de este ejemplo [aquí](http://jsfiddle.net/yyx990803/L7hscd8h/). diff --git a/docs-gitbook/es/essentials/passing-props.md b/docs-gitbook/es/essentials/passing-props.md deleted file mode 100644 index 1b9ae3484..000000000 --- a/docs-gitbook/es/essentials/passing-props.md +++ /dev/null @@ -1,79 +0,0 @@ -# Pasando propiedades a componentes de ruteo - -Usar `$route` en tu componente genera un acoplamiento estrecho con la ruta, lo cual limita la flexibilidad del componente dado que solo puede utilizarse en ciertas URL. - -Para desacoplar el componente del enrutador utiliza _props_: - -** Acoplado a $route** - -``` js -const User = { - template: '
    User {{ $route.params.id }}
    ' -} -const router = new VueRouter({ - routes: [ - { path: '/user/:id', component: User } - ] -}) -``` - -** Desacoplado con props** - -``` js -const User = { - props: ['id'], - template: '
    User {{ id }}
    ' -} -const router = new VueRouter({ - routes: [ - { path: '/user/:id', component: User, props: true }, - - // utilizando vistas con nombre, tienes que definir la opción prop para cada una de ellas: - { - path: '/user/:id', - components: { default: User, sidebar: Sidebar }, - props: { default: true, sidebar: false } - } - ] -}) -``` - -Esto te permite utilizar el componente en cualquier lugar, lo cual hace al mismo reutilizable y más sencillo de testear. - -### Modo boolean - -Cuando _props_ tiene asignado el valor true, `route.params` serán asignados como las _props_ del componente. - -### Modo objeto - -Cuando _props_ es un objeto, este será asignado tal cual como las _props_ del componente. -Útil para cuando las _props_ son estáticas. - -``` js -const router = new VueRouter({ - routes: [ - { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } - ] -}) -``` - -### Modo función - -Puedes crear una función que retorne _props_. -Esto te permite convertir los parámetros a otro tipo, combinar valores estáticos con valores basados en rutas, etc. - -``` js -const router = new VueRouter({ - routes: [ - { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } - ] -}) -``` - -La URL: `/search?q=vue` pasaría `{query: "vue"}` como _props_ al componente SearchUser. - -Intenta crear funciones _props_ sin estado, dado que solo se evalúan cuando ocurren cambios de ruta. -Utiliza un componente envolvente si necesitas estado para definir las _props_, de esa manera Vue puede reaccionar a cambios de estado. - - -Para un uso avanzado, aquí hay un [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). diff --git a/docs-gitbook/es/essentials/redirect-and-alias.md b/docs-gitbook/es/essentials/redirect-and-alias.md deleted file mode 100644 index cce4a8c49..000000000 --- a/docs-gitbook/es/essentials/redirect-and-alias.md +++ /dev/null @@ -1,58 +0,0 @@ -# Redireccionamiento y alias - -### Redireccionamiento - -El redireccionamiento también se realiza en la configuración de `routes`. Para redireccionar desde `/a` hasta `/b`: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', redirect: '/b' } - ] -}) -``` - -EL redireccionamiento también puede apuntar a una ruta con nombre: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', redirect: { name: 'foo' }} - ] -}) -``` - -O incluso puedes utilizar una función para un redireccionamiento dinámico: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', redirect: to => { - // la función recibe la ruta destino como argumento - // retorna aquí la ruta de redirección. - }} - ] -}) -``` - -Para otros usos avanzados, tienes el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). - -### Alias - -Una redirección significa que el usuario visita `/a`, y la URL será reemplazada por `/b`, para luego ejecutar el código correspondiente a `/b`. Pero, ¿qué es un alias? - -**Un alias de `/a` como `/b` significa que cuando el usuario visita `/b`, la URL se mantiene como `/b`, pero el código ejecutado corresponderá al mismo que si el usuario visitase `/a`.** - -Lo anterior puede ser expresado en la configuración de enrutamiento como: - -``` js -const router = new VueRouter({ - routes: [ - { path: '/a', component: A, alias: '/b' } - ] -}) -``` - -Un alias te da la libertad de mapear una estructura de _UI_ a una URL arbitraria, en lugar de estar restringido por la estructura anidada de la configuración. - -Para otros usos avanzados, aquí tienes un [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js). diff --git a/docs-gitbook/es/installation.md b/docs-gitbook/es/installation.md deleted file mode 100644 index 36084d3d3..000000000 --- a/docs-gitbook/es/installation.md +++ /dev/null @@ -1,44 +0,0 @@ -# Instalación - -### Descarga directa / CDN - -[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js) - - -[Unpkg.com](https://unpkg.com) provee enlaces a CDN basadas en NPM. El enlace anterior siempre apuntará a la última versión en NPM. También puedes usar una versión/etiqueta específica a través de URLs como`https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`. - - -Incluye `vue-router` luego de Vue y se instalará automáticamente: - -``` html - - -``` - -### NPM - -``` bash -npm install vue-router -``` - -Cuando lo utilices con un sistema de empaquetamiento de módulos, debes instalarlo explícitamente a través de `Vue.use()`: - -``` js -import Vue from 'vue' -import VueRouter from 'vue-router' - -Vue.use(VueRouter) -``` - -No necesitas hacer esto cuando utilices etiquetas _script_ globales. - -### Versión de desarrollo - -Debes clonar el repositorio directamente desde GitHub y construir `vue-router` tu mismo si quieres utilizar la última versión de desarrollo. - -``` bash -git clone https://github.com/vuejs/vue-router.git node_modules/vue-router -cd node_modules/vue-router -npm install -npm run build -``` diff --git a/docs-gitbook/fr/README.md b/docs-gitbook/fr/README.md deleted file mode 100644 index f8a898044..000000000 --- a/docs-gitbook/fr/README.md +++ /dev/null @@ -1 +0,0 @@ -{% include "./SUMMARY.md" %} diff --git a/docs-gitbook/fr/SUMMARY.md b/docs-gitbook/fr/SUMMARY.md deleted file mode 100644 index 3fa9be3f1..000000000 --- a/docs-gitbook/fr/SUMMARY.md +++ /dev/null @@ -1,41 +0,0 @@ -# vue-router - -> Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite vue@2.5+, et inverssement. - -**[Notes de version](https://github.com/vuejs/vue-router/releases)** - -- [Installation](installation.md) -- Essentiel - - [Pour commencer](essentials/getting-started.md) - - [Concordance dynamique de route](essentials/dynamic-matching.md) - - [Navigation programmatique](essentials/navigation.md) - - [Routes imbriquées](essentials/nested-routes.md) - - [Routes nommées](essentials/named-routes.md) - - [Vues nommées](essentials/named-views.md) - - [Redirection et alias](essentials/redirect-and-alias.md) - - [Passage de props aux composants de route](essentials/passing-props.md) - - [Mode historique de HTML5](essentials/history-mode.md) -- Avancé - - [Intercepteurs de navigation](advanced/navigation-guards.md) - - [Champs meta de route](advanced/meta.md) - - [Transitions](advanced/transitions.md) - - [Récupération de données](advanced/data-fetching.md) - - [Comportement du défilement](advanced/scroll-behavior.md) - - [Chargement à la volée](advanced/lazy-loading.md) -- Référence de l'API - - [Options de construction du routeur](api/options.md) - - [routes](api/options.md#routes) - - [mode](api/options.md#mode) - - [base](api/options.md#base) - - [linkActiveClass](api/options.md#linkactiveclass) - - [linkExactActiveClass](api/options.md#linkexactactiveclass) - - [scrollBehavior](api/options.md#scrollbehavior) - - [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery) - - [fallback](api/options.md#fallback) - - [L'instance du routeur](api/router-instance.md) - - [Propriétés](api/router-instance.md#propriétés) - - [Méthodes](api/router-instance.md#méthodes) - - [L'objet Route](api/route-object.md) - - [Injections de composant](api/component-injections.md) - - [router-link](api/router-link.md) - - [router-view](api/router-view.md) diff --git a/docs-gitbook/fr/advanced/data-fetching.md b/docs-gitbook/fr/advanced/data-fetching.md deleted file mode 100644 index e34f83535..000000000 --- a/docs-gitbook/fr/advanced/data-fetching.md +++ /dev/null @@ -1,110 +0,0 @@ -# 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. diff --git a/docs-gitbook/fr/advanced/lazy-loading.md b/docs-gitbook/fr/advanced/lazy-loading.md deleted file mode 100644 index 99582d2d9..000000000 --- a/docs-gitbook/fr/advanced/lazy-loading.md +++ /dev/null @@ -1,47 +0,0 @@ -# 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 -``` - -> 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/guides/code-splitting-async/#chunk-names) 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. diff --git a/docs-gitbook/fr/advanced/meta.md b/docs-gitbook/fr/advanced/meta.md deleted file mode 100644 index 24dc5ccd0..000000000 --- a/docs-gitbook/fr/advanced/meta.md +++ /dev/null @@ -1,51 +0,0 @@ -# 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()` ! - } -}) -``` diff --git a/docs-gitbook/fr/advanced/navigation-guards.md b/docs-gitbook/fr/advanced/navigation-guards.md deleted file mode 100644 index 1b686c0e8..000000000 --- a/docs-gitbook/fr/advanced/navigation-guards.md +++ /dev/null @@ -1,155 +0,0 @@ -# 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/route-object.md) 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/router-link.md) ou [`router.push`](../api/router-instance#méthodes). - - - **`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-instance.html#methods). - -**Assurez-vous de toujours appeler la fonction `next`, sinon le hook ne sera jamais résolu.** - -### Résolutions des interceptions globales - -> Nouveau dans la 2.5.0 - -Dans la 2.5.0+ 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 passer à la configuration du routeur) avec les options suivantes : - -- `beforeRouteEnter` -- `beforeRouteUpdate` (ajouté dans la 2.2+) -- `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 (ceux que l'on va quitter). -3. Appel des interceptions globales `beforeEach`. -4. Appel des interceptions `beforeRouteUpdate` pour les composants réutilisés (2.2+). -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 (ceux où l'on va arriver). -8. Appel des interceptions `beforeResolve` (2.5+). -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. diff --git a/docs-gitbook/fr/advanced/scroll-behavior.md b/docs-gitbook/fr/advanced/scroll-behavior.md deleted file mode 100644 index 546c51619..000000000 --- a/docs-gitbook/fr/advanced/scroll-behavior.md +++ /dev/null @@ -1,80 +0,0 @@ -# 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. diff --git a/docs-gitbook/fr/advanced/transitions.md b/docs-gitbook/fr/advanced/transitions.md deleted file mode 100644 index 2bb63c47c..000000000 --- a/docs-gitbook/fr/advanced/transitions.md +++ /dev/null @@ -1,58 +0,0 @@ -# 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). diff --git a/docs-gitbook/fr/api/component-injections.md b/docs-gitbook/fr/api/component-injections.md deleted file mode 100644 index c9f020a8b..000000000 --- a/docs-gitbook/fr/api/component-injections.md +++ /dev/null @@ -1,21 +0,0 @@ -# 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](route-object.md) 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](../advanced/navigation-guards.md#securisation-par-composant). diff --git a/docs-gitbook/fr/api/options.md b/docs-gitbook/fr/api/options.md deleted file mode 100644 index ef61bf779..000000000 --- a/docs-gitbook/fr/api/options.md +++ /dev/null @@ -1,107 +0,0 @@ -# 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](../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.md). - -### linkExactActiveClass - -> 2.5.0+ - -- 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.md). - -### scrollBehavior - -- type : `Function` - - Signature : - - ``` - type PositionDescriptor = - { x: number, y: number } | - { selector: string } | - ?{} - - type scrollBehaviorHandler = ( - to: Route, - from: Route, - savedPosition?: { x: number, y: number } - ) => PositionDescriptor | Promise - ``` - - Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md). - -### parseQuery / stringifyQuery - -> 2.4.0+ - -- 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 - -> 2.6.0+ - -- 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. diff --git a/docs-gitbook/fr/api/route-object.md b/docs-gitbook/fr/api/route-object.md deleted file mode 100644 index bdf566514..000000000 --- a/docs-gitbook/fr/api/route-object.md +++ /dev/null @@ -1,93 +0,0 @@ -# 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](../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](../essentials/redirect-and-alias.md)). diff --git a/docs-gitbook/fr/api/router-instance.md b/docs-gitbook/fr/api/router-instance.md deleted file mode 100644 index 43498fc98..000000000 --- a/docs-gitbook/fr/api/router-instance.md +++ /dev/null @@ -1,88 +0,0 @@ -# L'instance du routeur - -### Propriétés - -#### 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](options.md#mode) que le routeur utilise. - -#### router.currentRoute - -- type: `Route` - - La route actuelle représentée en tant qu'un [objet route](route-object.md). - -### Méthodes - -- **router.beforeEach(guard)** -- **router.beforeResolve(guard)** (2.5.0+) -- **router.afterEach(hook)** - - Ajout des interceptions globales de navigation. Voir les [Intercepteurs de navigation](../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(location, onComplete?, onAbort?)** -- **router.replace(location, onComplete?, onAbort?)** -- **router.go(n)** -- **router.back()** -- **router.forward()** - - Navigue à une nouvelle URL de façon programmée. Voir [Navigation de façon programmée](../essentials/navigation.md). - -- **router.getMatchedComponents(location?)** - - 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(location, current?, append?)** - - > 2.1.0+ - - 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.md#props)) - -- **router.addRoutes(routes)** - - > 2.2.0+ - - 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(callback, [errorCallback])** - - > 2.2.0+ - - 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(callback)** - - > 2.4.0+ - - 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. diff --git a/docs-gitbook/fr/api/router-link.md b/docs-gitbook/fr/api/router-link.md deleted file mode 100644 index e1b7a47d5..000000000 --- a/docs-gitbook/fr/api/router-link.md +++ /dev/null @@ -1,142 +0,0 @@ -# `` - -`` 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 les props `to` des URL. - -### 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** - - > 2.1.0+ - - - type : `string | Array` - - - défaut : `'click'` - - Spécifie les évènement(s) que peu(ven)t lancer la navigation de lien. - -- **exact-active-class** - - > 2.5.0+ - - - 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. - -### 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 `
  • `. diff --git a/docs-gitbook/fr/api/router-view.md b/docs-gitbook/fr/api/router-view.md deleted file mode 100644 index 619a2f8db..000000000 --- a/docs-gitbook/fr/api/router-view.md +++ /dev/null @@ -1,27 +0,0 @@ -# `` - -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](../essentials/named-views.md) pour un exemple. - -### Comportement - -Les propriétés sans nom seront passées le long du composant rendu, toutefois la plupart du temps, les données par route seront contenues dans les paramètres de la route. - -Car c'est juste un composant, il fonctionne avec `` et ``. Lorsque vous utilisez les deux ensemble, soyez sûr d'utiliser ` à l'intérieur : - -``` html - - - - - -``` diff --git a/docs-gitbook/fr/essentials/dynamic-matching.md b/docs-gitbook/fr/essentials/dynamic-matching.md deleted file mode 100644 index 56990e97c..000000000 --- a/docs-gitbook/fr/essentials/dynamic-matching.md +++ /dev/null @@ -1,74 +0,0 @@ -# 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/route-object.md). - -### 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 `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) 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#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. diff --git a/docs-gitbook/fr/essentials/getting-started.md b/docs-gitbook/fr/essentials/getting-started.md deleted file mode 100644 index efa2f78de..000000000 --- a/docs-gitbook/fr/essentials/getting-started.md +++ /dev/null @@ -1,92 +0,0 @@ -# Pour commencer - -> Nous utiliserons [ES2015](https://github.com/lukehoban/es6features) dans les exemples de code dans ce guide. - -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 : - -> 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). - -### 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.md). diff --git a/docs-gitbook/fr/essentials/history-mode.md b/docs-gitbook/fr/essentials/history-mode.md deleted file mode 100644 index 1d803e14b..000000000 --- a/docs-gitbook/fr/essentials/history-mode.md +++ /dev/null @@ -1,136 +0,0 @@ -# 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 - - RewriteEngine On - RewriteBase / - RewriteRule ^index\.html$ - [L] - RewriteCond %{REQUEST_FILENAME} !-f - RewriteCond %{REQUEST_FILENAME} !-d - RewriteRule . /index.html [L] - -``` - -#### 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.htm', 'utf-8', (err, content) => { - if (err) { -      console.log(`Impossible d'ouvrir le fichier "index.htm"`) - } - - 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. diff --git a/docs-gitbook/fr/essentials/named-routes.md b/docs-gitbook/fr/essentials/named-routes.md deleted file mode 100644 index 0dc5e668e..000000000 --- a/docs-gitbook/fr/essentials/named-routes.md +++ /dev/null @@ -1,31 +0,0 @@ -# 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). diff --git a/docs-gitbook/fr/essentials/named-views.md b/docs-gitbook/fr/essentials/named-views.md deleted file mode 100644 index 4a3c1578f..000000000 --- a/docs-gitbook/fr/essentials/named-views.md +++ /dev/null @@ -1,86 +0,0 @@ -# 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 `