From ef4a04681531b380744b2bdb744c2cf555e3344d Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 13 Oct 2017 16:33:37 -0400 Subject: [PATCH 001/133] use esm build in examples --- examples/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/webpack.config.js b/examples/webpack.config.js index c24ffb74b..03537fa9f 100644 --- a/examples/webpack.config.js +++ b/examples/webpack.config.js @@ -32,7 +32,7 @@ module.exports = { resolve: { alias: { - 'vue': 'vue/dist/vue.common.js', + 'vue': 'vue/dist/vue.esm.js', 'vue-router': path.join(__dirname, '..', 'src') } }, From 0039fa4943b7b3a6ad737779735c8a09bf9a0d9b Mon Sep 17 00:00:00 2001 From: Junha Jang Date: Wed, 18 Oct 2017 19:15:04 +0900 Subject: [PATCH 002/133] [kr] Fix typo (#1826) --- docs/kr/advanced/navigation-guards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/kr/advanced/navigation-guards.md b/docs/kr/advanced/navigation-guards.md index 992d43785..1ae69f5ba 100644 --- a/docs/kr/advanced/navigation-guards.md +++ b/docs/kr/advanced/navigation-guards.md @@ -2,7 +2,7 @@ 이름에서 알 수 있듯이 `vue-router`가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용됩니다. 라우트 탐색 프로세스에 연결하는 방법에는 전역, 라우트별 또는 컴포넌트가 있습니다. -**Params 또는 쿼리를 변경하면 네비게이션 가드가 실행되지 않습니다**. 단순히 [`$route` 객체를 감시](../essentials/dynamic-matching.md#reacting-to-params-changes)하고 그 변화에 반응하십시오. 또는 컴포넌트 가드의 `beforeRouteUpadte`를 사용하십시오 +**Params 또는 쿼리를 변경하면 네비게이션 가드가 실행되지 않습니다**. 단순히 [`$route` 객체를 감시](../essentials/dynamic-matching.md#reacting-to-params-changes)하고 그 변화에 반응하십시오. 또는 컴포넌트 가드의 `beforeRouteUpdate`를 사용하십시오 ### 전역 가드 From 2930d52a870f5ebe4ee7fcc30bad9bbbb8d851a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B3=B0?= <348018533@qq.com> Date: Wed, 18 Oct 2017 05:18:08 -0500 Subject: [PATCH 003/133] Update navigation-guards.md (#1823) --- docs/zh-cn/advanced/navigation-guards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/advanced/navigation-guards.md b/docs/zh-cn/advanced/navigation-guards.md index beda03669..6e382ade4 100644 --- a/docs/zh-cn/advanced/navigation-guards.md +++ b/docs/zh-cn/advanced/navigation-guards.md @@ -120,7 +120,7 @@ beforeRouteEnter (to, from, next) { ### 完整的导航解析流程 1. 导航被触发。 -2. 在失活的组建里调用离开守卫。 +2. 在失活的组件里调用离开守卫。 3. 调用全局的 `beforeEach` 守卫。 4. 在重用的组件里调用 `beforeRouteUpdate` 守卫 (2.2+)。 5. 在路由配置里调用 `beforeEnter`。 From 6d97e5efcfec0aa76d90c9c2eb65103a4f283b54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Wed, 18 Oct 2017 18:18:37 +0800 Subject: [PATCH 004/133] [en] typo (#1825) --- docs/en/advanced/navigation-guards.md | 2 +- docs/en/essentials/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/advanced/navigation-guards.md b/docs/en/advanced/navigation-guards.md index c479cde64..67ab1aa12 100644 --- a/docs/en/advanced/navigation-guards.md +++ b/docs/en/advanced/navigation-guards.md @@ -116,7 +116,7 @@ beforeRouteEnter (to, from, next) { } ``` -Note that `beforeRouteEnter` is the only hook that supports passing a callback to `next`. For `beforeRouteUpdate` and `beforeRouteLeave`, `this` is already available, so passing a callback is unnecessary and therefore *not supported*: +Note that `beforeRouteEnter` is the only guard that supports passing a callback to `next`. For `beforeRouteUpdate` and `beforeRouteLeave`, `this` is already available, so passing a callback is unnecessary and therefore *not supported*: ```js beforeRouteUpdate (to, from, next) { diff --git a/docs/en/essentials/getting-started.md b/docs/en/essentials/getting-started.md index 8b826aa12..197d8826d 100644 --- a/docs/en/essentials/getting-started.md +++ b/docs/en/essentials/getting-started.md @@ -88,6 +88,6 @@ export default { Throughout the docs, we will often use the `router` instance. Keep in mind that `this.$router` is exactly the same as using `router`. The reason we use `this.$router` is because we don't want to import the router in every single component that needs to manipulate routing. -You can also check out this example [live](http://jsfiddle.net/yyx990803/xgrjzsup/). +You can also check out this example [live](https://jsfiddle.net/yyx990803/xgrjzsup/). Notice that a `` automatically gets the `.router-link-active` class when its target route is matched. You can learn more about it in its [API reference](../api/router-link.md). From ced6e876f95c9a74b75bcfe484b5d8cf0a67894e Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sun, 22 Oct 2017 23:02:25 +0200 Subject: [PATCH 005/133] [Doc FR]: Update with 2.5 version! (#1840) * VueRouter vs. Vue Router Signed-off-by: Bruno Lesieur * `VueRouter` vs. Vue Router * no changes for EN docs. Signed-off-by: Bruno Lesieur * New review from @rspt Signed-off-by: Bruno Lesieur * Introduce @rspt review Signed-off-by: Bruno Lesieur * @posva review Signed-off-by: Bruno Lesieur * Update documentation with version 2.5 Signed-off-by: Bruno Lesieur * Little fixes Signed-off-by: Bruno Lesieur --- docs/fr/SUMMARY.md | 6 ++--- docs/fr/advanced/navigation-guards.md | 25 ++++++++++++++++++-- docs/fr/advanced/scroll-behavior.md | 20 +++++++++++++++- docs/fr/api/options.md | 9 +++++-- docs/fr/essentials/getting-started.md | 23 ++++++++++++++++++ docs/fr/essentials/history-mode.md | 30 +++++++++++++++++++----- docs/fr/essentials/redirect-and-alias.md | 2 ++ 7 files changed, 101 insertions(+), 14 deletions(-) diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index c601ba47b..8b87aaab3 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -1,7 +1,7 @@ # vue-router 2 - -> Note: vue-router@2.x fonctionne uniquement avec Vue 2.x. La doc pour la 0.7.x est [ici](https://github.com/vuejs/vue-router/tree/1.0/docs/en). - + +> 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) diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md index 4937bb1ae..b420d7a8a 100644 --- a/docs/fr/advanced/navigation-guards.md +++ b/docs/fr/advanced/navigation-guards.md @@ -30,7 +30,7 @@ Chaque fonction d'interception reçoit trois arguments : - **`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. + - **`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 via `router.onError()`. @@ -116,7 +116,28 @@ beforeRouteEnter (to, from, next) { } ``` -Vous pouvez directement accéder à `this` à l'intérieur de `beforeRouteLeave`. L'interception de sortie est utilisée pour empêcher l'utilisateur de quitter la route par accident alors qu'il n'a pas sauvé ses modifications. La navigation peut être annulée en appelant `next(false)`. +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 diff --git a/docs/fr/advanced/scroll-behavior.md b/docs/fr/advanced/scroll-behavior.md index 5e14fd67a..546c51619 100644 --- a/docs/fr/advanced/scroll-behavior.md +++ b/docs/fr/advanced/scroll-behavior.md @@ -2,7 +2,7 @@ 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 qu'avec le mode historique HTML5.** +**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` : @@ -60,3 +60,21 @@ scrollBehavior (to, from, savedPosition) { ``` 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/fr/api/options.md b/docs/fr/api/options.md index f37e16530..ef61bf779 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -74,11 +74,16 @@ Signature : ``` - ( + type PositionDescriptor = + { x: number, y: number } | + { selector: string } | + ?{} + + type scrollBehaviorHandler = ( to: Route, from: Route, savedPosition?: { x: number, y: number } - ) => { x: number, y: number } | { selector: string } | ?{} + ) => PositionDescriptor | Promise ``` Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md). diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index 4dee272f9..e5f612e5a 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -64,6 +64,29 @@ const app = new Vue({ // 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 pourquoi `params` est court. + 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/fr/essentials/history-mode.md b/docs/fr/essentials/history-mode.md index d4eb4ad5d..37b9d2584 100644 --- a/docs/fr/essentials/history-mode.md +++ b/docs/fr/essentials/history-mode.md @@ -43,24 +43,24 @@ location / { #### Node.js natif ```js -const http = require("http") -const fs = require("fs") +const http = require('http') +const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { - fs.readFile("index.htm", "utf-8", (err, content) => { + fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { - console.log(`Impossible d'ouvrir le fichier "index.htm"`) +      console.log(`Impossible d'ouvrir le fichier "index.htm"`) } res.writeHead(200, { - "Content-Type": "text/html; charset=utf-8" + 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { - console.log("Le serveur écoute à : http://localhost:%s", httpPort) + console.log('Le serveur écoute à : http://localhost:%s', httpPort) }) ``` @@ -102,6 +102,24 @@ rewrite { } ``` +#### 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 : diff --git a/docs/fr/essentials/redirect-and-alias.md b/docs/fr/essentials/redirect-and-alias.md index 0a791ee51..b1d6d9619 100644 --- a/docs/fr/essentials/redirect-and-alias.md +++ b/docs/fr/essentials/redirect-and-alias.md @@ -35,6 +35,8 @@ const router = new VueRouter({ }) ``` +Notez que les [intercepteurs de navigation](../advanced/navigation-guards.md) ne sont pas appliqués sur les routes d'où à lieu la redirection mais uniquement sur les routes cibles. Dans l'exemple ci-dessous, ajouter une interception `beforeEnter` ou `beforeLeave` à la route `/a` n'aura aucun effet. + Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). ### Alias From af9571925f69a25d722f3d97aefb065df872054d Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Sun, 22 Oct 2017 23:04:34 +0200 Subject: [PATCH 006/133] docs(params): comment about params cc @Haeresis --- docs/fr/essentials/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index e5f612e5a..e8cc30269 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -71,7 +71,7 @@ En injectant le routeur, nous y avons accès à travers `this.$router`. Nous avo export default { computed: { username () { - // Nous verrons pourquoi `params` est court. + // Nous verrons ce que représente `params` en un instant. return this.$route.params.username } }, From 8ee872f80c9bd8748d5550bbbf224208fe656aa7 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Mon, 23 Oct 2017 23:40:17 +0900 Subject: [PATCH 007/133] Update Japanese docs (#1813) * docs: http -> https * docs: tweak js string quoting NOTE: pick up from https://github.com/vuejs/vue-router/commit/7d2e60ee5bd0a830cc8b873409f134d79c128d37 * docs: pick up from https://github.com/vuejs/vue-router/commit/a5ecfa176fab33c6a9c24298a1ab5ecc6f48a628 * docs: translate previous commit * docs: pick up from https://github.com/vuejs/vue-router/commit/8f10178f50eeccd0e50ef36a2f65ba57b1f3601d * docs: translate previous commit * docs: pick up from https://github.com/vuejs/vue-router/commit/91f4ad716514fdbf6258ea30a08d6168a99dd72a * docs: translate previous commit * docs: pick up from https://github.com/vuejs/vue-router/commit/a06e0b2ee31afd1e545458ad300057e6d2baa3f2 * docs: translate previous commit * docs: pick up from https://github.com/vuejs/vue-router/commit/3b16bf18532033139644e6016fb31ad27be7f667 * docs: translate previous commit * docs: pick up from https://github.com/vuejs/vue-router/commit/f0871d137bdb01e1ea1308cfa0a6fbb67ee6318d * docs: translate previous commit * docs: update SUMMARY translation NOTE: pick up from https://github.com/vuejs/vue-router/commit/b7073528fd573c5b0fb5cd13d85d5d2e3395d32c * docs: fixed translation mistaking ref: https://github.com/vuejs/vue-router/pull/1813#discussion_r146107146 * docs: fixed typo --- docs/ja/SUMMARY.md | 6 ++--- docs/ja/advanced/lazy-loading.md | 2 +- docs/ja/advanced/navigation-guards.md | 25 +++++++++++++++++++-- docs/ja/advanced/scroll-behavior.md | 22 +++++++++++++++++-- docs/ja/api/options.md | 9 ++++++-- docs/ja/essentials/dynamic-matching.md | 2 +- docs/ja/essentials/getting-started.md | 25 ++++++++++++++++++++- docs/ja/essentials/history-mode.md | 28 +++++++++++++++++++----- docs/ja/essentials/nested-routes.md | 2 +- docs/ja/essentials/redirect-and-alias.md | 2 ++ 10 files changed, 105 insertions(+), 18 deletions(-) diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md index c82d8229a..17209d165 100644 --- a/docs/ja/SUMMARY.md +++ b/docs/ja/SUMMARY.md @@ -1,7 +1,7 @@ # vue-router 2 - -> 注意: vue-router@2.x は Vue 2.x のみで動作します。[0.7 のドキュメントをお探しですか?](https://github.com/vuejs/vue-router/tree/1.0/docs/ja) - + +> 注意: TypeScript ユーザ向けは、vue-router@>= 3.0 と vue@>=2.5 が必須、逆もまた同様です。 + **[リリースノート](https://github.com/vuejs/vue-router/releases)** - [インストール](installation.md) diff --git a/docs/ja/advanced/lazy-loading.md b/docs/ja/advanced/lazy-loading.md index 989eae137..7f0b17bc1 100644 --- a/docs/ja/advanced/lazy-loading.md +++ b/docs/ja/advanced/lazy-loading.md @@ -16,7 +16,7 @@ const Foo = () => Promise.resolve({ /* component definition */ }) import('./Foo.vue') // returns a Promise ``` -> Note: Babel を使用している場合、Babel が構文を正しく解析するために [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) プラグインを追加する必要があります。 +> Note: Babel を使用している場合、Babel が構文を正しく解析するために [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/) プラグインを追加する必要があります。 2 つを組み合わせることで、これは、webpack によって自動的にコード分割される非同期コンポーネントを定義する方法です: diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index 623c3cc16..c0bba1ffa 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -30,7 +30,7 @@ router.beforeEach((to, from, next) => { - **`next(false)`**: 現在のナビゲーションを中止します。もしブラウザのURLが変化した場合は（ユーザーが手動で変更した場合でも、戻るボタンの場合でも）、 `from` ルートのURLにリセットされます。 - - **`next('/')` または `next({ path: '/' })`**: 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナビゲーションが始まります。 + - **`next('/')` または `next({ path: '/' })`**: 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナビゲーションが始まります。任意のロケーションオブジェクトを `next` に渡すことができます。この `next` には、`replace: true`、 `name: 'home'` のようなオプション、そして [`router-link`、`to` プロパティ](../api/router-link.md)または [`router.push`](../api/router-instance.md#methods)で使用される任意のオプションを指定することができます。 - **`next(error)`**: (2.4.0+) `next` に渡された引数が `Error` インスタンスである場合、ナビゲーションは中止され、エラーは `router.onError()` を介して登録されたコールバックに渡されます。 @@ -115,7 +115,28 @@ beforeRouteEnter (to, from, next) { } ``` -`beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。 +コールバックを `next` に渡すことをサポートするのは、`beforeRouteEnter`フックだけであるということに注意してください。`beforeRouteUpdate` と `beforeRouteLeave` の場合、 `this` は既に利用可能です。したがって、コールバックを渡す必要はないので、*サポートされません*: + +```js +beforeRouteUpdate (to, from, next) { + // `this` を使用 + this.name = to.params.name + next() +} +``` + +**leave ガード**は、通常、ユーザが保存されていない編集内容で誤って経路を離れるのを防ぐために使用されます。ナビゲーションは `next(false)` を呼び出すことで取り消すことができます。 + +```js +beforeRouteLeave (to, from , next) { + const answer = window.confirm('Do you really want to leave? you have unsaved changes!') + if (answer) { + next() + } else { + next(false) + } +} +``` ### 完全なナビゲーション解決フロー 1. ナビゲーションがトリガされる diff --git a/docs/ja/advanced/scroll-behavior.md b/docs/ja/advanced/scroll-behavior.md index 6c1ba7c62..ffb475573 100644 --- a/docs/ja/advanced/scroll-behavior.md +++ b/docs/ja/advanced/scroll-behavior.md @@ -2,9 +2,9 @@ クライアントサイドのルーティングを使っている時に、新しいルートに対してスクロールをトップへ移動させたいかもしれません、もしくは実際のページリロードがしているように history 要素のスクロールポジションを保持したいこともあるかもしれません。 `vue-router` ではこれらをさらによく実現できます。ルートナビゲーションにおけるスクロールの挙動を完全にカスタマイズすることができます。 -**注意: この機能は HTML5 history モードでのみ動作します。** +**注意: この機能は ブラウザが `history.pushState` をサポートしている場合のみ動作します。** -ルートインスタンスを作る時に、 `scrollBehavior` 関数を提供できます。 +ルーターインスタンスを作る時に、 `scrollBehavior` 関数を提供できます。 ``` js const router = new VueRouter({ @@ -61,3 +61,21 @@ scrollBehavior (to, from, savedPosition) { ``` きめの細かいスクロールの挙動コントロールを実装するために [ルートメタフィールド](meta.md) も利用可能です。詳細な例は [こちら](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js) をご参照ください。 + +### 非同期なスクローリング + +> 2.8.0 で新規 + +期待する位置記述子 (position descriptor) に解決されるプロミスを返すこともできます: + +``` js +scrollBehavior (to, from, savedPosition) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve({ x: 0, y: 0 }) + }, 500) + }) +} +``` + +スクロールの振る舞いをページの遷移とうまく合わせるために、ページレベルのトランジションコンポーネントからのイベントにフックすることは可能ですが、ユースケースにおいて可能性のある食い違いと複雑さのために、単純に特定のユーザランド実装を可能にするために、このプリミティブな機能を提供します。 diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index 3a635245c..0012cf81a 100644 --- a/docs/ja/api/options.md +++ b/docs/ja/api/options.md @@ -74,11 +74,16 @@ シグネチャ: ``` - ( + type PositionDescriptor = + { x: number, y: number } | + { selector: string } | + ?{} + + type scrollBehaviorHandler = ( to: Route, from: Route, savedPosition?: { x: number, y: number } - ) => { x: number, y: number } | { selector: string } | ?{} + ) => PositionDescriptor | Promise ``` より詳細については [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください。 diff --git a/docs/ja/essentials/dynamic-matching.md b/docs/ja/essentials/dynamic-matching.md index 36bfdd706..2b29de1bd 100644 --- a/docs/ja/essentials/dynamic-matching.md +++ b/docs/ja/essentials/dynamic-matching.md @@ -25,7 +25,7 @@ const User = { } ``` -[こちら](http://jsfiddle.net/yyx990803/4xfa2f19/) のデモの例も確認してみてください。 +[こちら](https://jsfiddle.net/yyx990803/4xfa2f19/) のデモの例も確認してみてください。 1 つのルートが複数の動的なセグメントを持つこともできます。そして、それらは `$route.params` の一致したフィールドとマップされます。例: diff --git a/docs/ja/essentials/getting-started.md b/docs/ja/essentials/getting-started.md index f3338e493..f6abe57ff 100644 --- a/docs/ja/essentials/getting-started.md +++ b/docs/ja/essentials/getting-started.md @@ -64,7 +64,30 @@ const app = new Vue({ // これで開始です! ``` -[動作](http://jsfiddle.net/yyx990803/xgrjzsup/) の例も確認してみてください. +ルーターを注入することによって、`this.$router` と同様、任意のコンポーネント内部で現在のルートを `this.$route` としてアクセスすることができます: + +```js +// Home.vue +export default { + computed: { + username () { + // `params` が表示される + return this.$route.params.username + } + }, + methods: { + goBack () { + window.history.length > 1 + ? this.$router.go(-1) + : this.$router.push('/') + } + } +} +``` + +ドキュメントを通して、しばしば `router` インスタンスを使用することがよくあります。`this.$router` は `router` を使用するのと全く同じです。`this.$router` を使用する理由は、ルーティング操作する必要がある全てのコンポーネントにルーターをインポートしたくないからです。 + +[動作](https://jsfiddle.net/yyx990803/xgrjzsup/) の例も確認してみてください. `` は対象のルートがマッチした時に自動的に `.router-link-active` が付与されるのにお気づきでしょうか。 より詳細については [API リファレンス](../api/router-link.md) をご参照ください。 diff --git a/docs/ja/essentials/history-mode.md b/docs/ja/essentials/history-mode.md index b3b7cfe41..8eff51b4f 100644 --- a/docs/ja/essentials/history-mode.md +++ b/docs/ja/essentials/history-mode.md @@ -43,24 +43,24 @@ location / { #### Native Node.js ```js -const http = require("http") -const fs = require("fs") +const http = require('http') +const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { - fs.readFile("index.htm", "utf-8", (err, content) => { + fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { - "Content-Type": "text/html; charset=utf-8" + 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { - console.log("Server listening on: http://localhost:%s", httpPort) + console.log('Server listening on: http://localhost:%s', httpPort) }) ``` @@ -102,6 +102,24 @@ rewrite { } ``` +#### Firebase のホスティング + +以下を `firebase.json` に追加します: + +``` +{ + "hosting": { + "public": "dist", + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} +``` + ## 注意 この点に関して注意があります。全ての not-found パスが `index.html` を提供するため、もはや 404 エラーをサーバーがレポートしなくなります。回避策として、Vue アプリケーション内で 404 ページを表示するために catch-all ルートを実装すべきです。 diff --git a/docs/ja/essentials/nested-routes.md b/docs/ja/essentials/nested-routes.md index 22da5c3ab..da153569a 100644 --- a/docs/ja/essentials/nested-routes.md +++ b/docs/ja/essentials/nested-routes.md @@ -95,4 +95,4 @@ const router = new VueRouter({ }) ``` -この例の動作デモは [こちら](http://jsfiddle.net/yyx990803/L7hscd8h/) です。 +この例の動作デモは [こちら](https://jsfiddle.net/yyx990803/L7hscd8h/) です。 diff --git a/docs/ja/essentials/redirect-and-alias.md b/docs/ja/essentials/redirect-and-alias.md index 88248e1ae..cd182a776 100644 --- a/docs/ja/essentials/redirect-and-alias.md +++ b/docs/ja/essentials/redirect-and-alias.md @@ -35,6 +35,8 @@ const router = new VueRouter({ }) ``` +[ナビゲーションガード](../advanced/navigation-guards.md)はリダイレクトするルートに提供されず、ターゲット上のみに適用されるということに注意してください。例では、`beforeEnter` または `beforeLeave` ガードを `/a` ルートに追加しても効果がありません。 + その他の高度な使い方として、[例](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js) をご参照ください。 ### エイリアス From c93a734dd40fbc76752930b27e2aa2ce39a5097e Mon Sep 17 00:00:00 2001 From: James Homer Date: Mon, 23 Oct 2017 17:22:32 +0100 Subject: [PATCH 008/133] feat: call scrollBehavior with app context (#1804) * Call scrollBehavior with app context This allows us to listen for events in the scroll behavior hook, thus enabling us to resolve a promise returned by the hook upon triggering of some custom event (for example one emited on the $root by an after-leave transition event). * Update scrollBehavior example * change scrollBehavior context to router --- examples/scroll-behavior/app.js | 48 ++++++++++++++++++++------------- src/util/scroll.js | 2 +- 2 files changed, 30 insertions(+), 20 deletions(-) diff --git a/examples/scroll-behavior/app.js b/examples/scroll-behavior/app.js index e4c40d057..4f1bbb3d1 100644 --- a/examples/scroll-behavior/app.js +++ b/examples/scroll-behavior/app.js @@ -25,23 +25,27 @@ const scrollBehavior = function (to, from, savedPosition) { // savedPosition is only available for popstate navigations. return savedPosition } else { - return new Promise(resolve => { - const position = {} - let delay = 500 - // new navigation. - // scroll to anchor by returning the selector - if (to.hash) { - position.selector = to.hash + const position = {} + + // scroll to anchor by returning the selector + if (to.hash) { + position.selector = to.hash - // specify offset of the element - if (to.hash === '#anchor2') { - position.offset = { y: 100 } - } + // specify offset of the element + if (to.hash === '#anchor2') { + position.offset = { y: 100 } + } - if (document.querySelector(to.hash)) { - delay = 0 - } + if (document.querySelector(to.hash)) { + return position } + + // if the returned position is falsy or an empty object, + // will retain current scroll position. + return false + } + + return new Promise(resolve => { // check if any matched route config has meta that requires scrolling to top if (to.matched.some(m => m.meta.scrollToTop)) { // coords will be used if no selector is provided, @@ -49,12 +53,13 @@ const scrollBehavior = function (to, from, savedPosition) { position.x = 0 position.y = 0 } + // wait for the out transition to complete (if necessary) - setTimeout(() => { - // if the returned position is falsy or an empty object, + this.app.$root.$once('triggerScroll', () => { + // if the resolved position is falsy or an empty object, // will retain current scroll position. resolve(position) - }, delay) + }) }) } } @@ -82,9 +87,14 @@ new Vue({
  • /bar#anchor
  • /bar#anchor2
    • - + - ` + `, + methods: { + afterLeave () { + this.$root.$emit('triggerScroll') + } + } }).$mount('#app') diff --git a/src/util/scroll.js b/src/util/scroll.js index 9991adaa7..cceb03640 100644 --- a/src/util/scroll.js +++ b/src/util/scroll.js @@ -39,7 +39,7 @@ export function handleScroll ( // wait until re-render finishes before scrolling router.app.$nextTick(() => { const position = getScrollPosition() - const shouldScroll = behavior(to, from, isPop ? position : null) + const shouldScroll = behavior.call(router, to, from, isPop ? position : null) if (!shouldScroll) { return From e5778d761d625ae0b98948f8ccaafb2ab32512e8 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 23 Oct 2017 21:28:25 +0200 Subject: [PATCH 009/133] docs(search): remove emojis This should fix the search. There aren't emojis anywhere else, so having them removed is more consistant --- docs/en/essentials/passing-props.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/essentials/passing-props.md b/docs/en/essentials/passing-props.md index 3e2f6dbcf..ee5534bf7 100644 --- a/docs/en/essentials/passing-props.md +++ b/docs/en/essentials/passing-props.md @@ -4,7 +4,7 @@ Using `$route` in your component creates a tight coupling with the route which l To decouple this component from the router use option `props`: -**❌ Coupled to `$route`** +**Instead of coupling to `$route`:** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Decoupled with `props`** +**Decouple it by using `props`** ``` js const User = { From e2f0a113b5eacbb73ee7c1b512cc1e7be49053ba Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Tue, 24 Oct 2017 09:30:22 +0200 Subject: [PATCH 010/133] docs(fr): fix grammar --- docs/fr/essentials/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index e8cc30269..efa2f78de 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -71,7 +71,7 @@ En injectant le routeur, nous y avons accès à travers `this.$router`. Nous avo export default { computed: { username () { - // Nous verrons ce que représente `params` en un instant. + // Nous verrons ce que représente `params` dans un instant. return this.$route.params.username } }, From 9eecbd9f4601b29f9c278eace65de1d46264318b Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Tue, 24 Oct 2017 09:41:08 +0200 Subject: [PATCH 011/133] docs(search): Remove emojis from all docs Fix #1738 --- docs/es/SUMMARY.md | 2 +- docs/es/advanced/lazy-loading.md | 2 +- docs/es/essentials/passing-props.md | 4 ++-- docs/fr/essentials/passing-props.md | 4 ++-- docs/ja/essentials/passing-props.md | 4 ++-- docs/kr/essentials/passing-props.md | 4 ++-- docs/ru/advanced/scroll-behavior.md | 2 +- docs/ru/api/options.md | 2 +- docs/ru/api/router-instance.md | 2 +- docs/ru/essentials/passing-props.md | 4 ++-- docs/zh-cn/essentials/passing-props.md | 4 ++-- 11 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md index 1df295ed7..95551035c 100644 --- a/docs/es/SUMMARY.md +++ b/docs/es/SUMMARY.md @@ -38,4 +38,4 @@ - [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) \ No newline at end of file + - [router-view](api/router-view.md) diff --git a/docs/es/advanced/lazy-loading.md b/docs/es/advanced/lazy-loading.md index 667518a61..69c0b4a1b 100644 --- a/docs/es/advanced/lazy-loading.md +++ b/docs/es/advanced/lazy-loading.md @@ -41,4 +41,4 @@ 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). \ No newline at end of file +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/es/essentials/passing-props.md b/docs/es/essentials/passing-props.md index 330f06a74..1ac6a8785 100644 --- a/docs/es/essentials/passing-props.md +++ b/docs/es/essentials/passing-props.md @@ -4,7 +4,7 @@ Usar `$route` en tu componente genera un acoplamiento estrecho con la ruta, lo c Para desacoplar el componente del enrutador utiliza _props_: -**❌ Acoplado a $route** +** Acoplado a $route** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Desacoplado con props** +** Desacoplado con props** ``` js const User = { diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md index e77d77308..2e6978dd9 100644 --- a/docs/fr/essentials/passing-props.md +++ b/docs/fr/essentials/passing-props.md @@ -4,7 +4,7 @@ Utiliser `$route` dans vos composants crée un couplage fort à la route qui va Pour découpler un composant de son routeur, utilisez les props : -**❌ Couplé avec `$route`** +** Couplé avec `$route`** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Découplé avec les `props`** +** Découplé avec les `props`** ``` js const User = { diff --git a/docs/ja/essentials/passing-props.md b/docs/ja/essentials/passing-props.md index 338280220..056d3c8f2 100644 --- a/docs/ja/essentials/passing-props.md +++ b/docs/ja/essentials/passing-props.md @@ -4,7 +4,7 @@ コンポーネントをルーターから分離するために `props` オプションを使います: -**❌ `$route` に結合** +** `$route` に結合** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 `props` による分離** +** `props` による分離** ``` js const User = { diff --git a/docs/kr/essentials/passing-props.md b/docs/kr/essentials/passing-props.md index 2ee4b1c03..9a1da1089 100644 --- a/docs/kr/essentials/passing-props.md +++ b/docs/kr/essentials/passing-props.md @@ -4,7 +4,7 @@ 컴포넌트와 라우터 속성을 분리하려면 다음과 같이 하십시오. -**❌ $route에 의존성 추가** +** $route에 의존성 추가** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 속성에 의존성 해제** +** 속성에 의존성 해제** ``` js const User = { diff --git a/docs/ru/advanced/scroll-behavior.md b/docs/ru/advanced/scroll-behavior.md index c15e381ed..1c4fb5a6c 100644 --- a/docs/ru/advanced/scroll-behavior.md +++ b/docs/ru/advanced/scroll-behavior.md @@ -77,4 +77,4 @@ scrollBehavior (to, from, savedPosition) { } ``` -Это возможно связать с событиями из сменяющегося компонента-страниц, чтобы сделать поведение прокрутки более сочетаемым с вашими анимациями перехода между страницами, но из-за множества возможных вариантов и комплексности примеров, мы просто предоставляем этот просто пример чтобы показать где можно разместить собственную реализацию. \ No newline at end of file +Это возможно связать с событиями из сменяющегося компонента-страниц, чтобы сделать поведение прокрутки более сочетаемым с вашими анимациями перехода между страницами, но из-за множества возможных вариантов и комплексности примеров, мы просто предоставляем этот просто пример чтобы показать где можно разместить собственную реализацию. diff --git a/docs/ru/api/options.md b/docs/ru/api/options.md index d1bc5afa7..722236670 100644 --- a/docs/ru/api/options.md +++ b/docs/ru/api/options.md @@ -104,4 +104,4 @@ Контролирует, должен ли маршрутизатор возвращаться в режим `hash`, когда браузер не поддерживает `history.pushState`. По умолчанию значение `true`. - Установка этого параметра в `false` будет вызывать для каждой навигации через `router-link` полное обновление страницы в IE9. Это может быть полезным, когда приложение рендерится на стороне сервера и должно работать в IE9, потому что режим `hash` не работает с SSR. \ No newline at end of file + Установка этого параметра в `false` будет вызывать для каждой навигации через `router-link` полное обновление страницы в IE9. Это может быть полезным, когда приложение рендерится на стороне сервера и должно работать в IE9, потому что режим `hash` не работает с SSR. diff --git a/docs/ru/api/router-instance.md b/docs/ru/api/router-instance.md index 3e8113359..7602fa9b7 100644 --- a/docs/ru/api/router-instance.md +++ b/docs/ru/api/router-instance.md @@ -85,4 +85,4 @@ - Ошибка фиксируется и асинхронно обрабатывается с помощью `next(err)` внутри функции сторожевого хука; - - Произошла ошибка при попытке разрешить асинхронный компонент, необходимый для отображения маршрута. \ No newline at end of file + - Произошла ошибка при попытке разрешить асинхронный компонент, необходимый для отображения маршрута. diff --git a/docs/ru/essentials/passing-props.md b/docs/ru/essentials/passing-props.md index 3a5e8c334..082ba7fc4 100644 --- a/docs/ru/essentials/passing-props.md +++ b/docs/ru/essentials/passing-props.md @@ -4,7 +4,7 @@ Для разделения компонента от маршрутизатора можно использовать входные данные: -**❌ Жёсткая связь с `$route`** +** Жёсткая связь с `$route`** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Разделение с помощью входных параметров** +** Разделение с помощью входных параметров** ``` js const User = { diff --git a/docs/zh-cn/essentials/passing-props.md b/docs/zh-cn/essentials/passing-props.md index 241f9848b..e51bc610d 100644 --- a/docs/zh-cn/essentials/passing-props.md +++ b/docs/zh-cn/essentials/passing-props.md @@ -4,7 +4,7 @@ 使用props将组件和路由解耦： -**❌ 与$route耦合** +** 与$route耦合** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 使用props解耦** +** 使用props解耦** ``` js const User = { From fac60f63401be86c5a76124782de28f600e7694b Mon Sep 17 00:00:00 2001 From: JounQin Date: Tue, 24 Oct 2017 19:59:45 +0800 Subject: [PATCH 012/133] fix: only setupScroll when support pushState due to possible fallback: false (#1835) * fix #1834 * judge supportsPushState before setupScroll * expectScroll -> supportsScroll --- src/history/html5.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/history/html5.js b/src/history/html5.js index 17e1c5cbe..95c47344c 100644 --- a/src/history/html5.js +++ b/src/history/html5.js @@ -5,15 +5,16 @@ import { History } from './base' import { cleanPath } from '../util/path' import { START } from '../util/route' import { setupScroll, handleScroll } from '../util/scroll' -import { pushState, replaceState } from '../util/push-state' +import { pushState, replaceState, supportsPushState } from '../util/push-state' export class HTML5History extends History { constructor (router: Router, base: ?string) { super(router, base) const expectScroll = router.options.scrollBehavior + const supportsScroll = supportsPushState && expectScroll - if (expectScroll) { + if (supportsScroll) { setupScroll() } @@ -29,7 +30,7 @@ export class HTML5History extends History { } this.transitionTo(location, route => { - if (expectScroll) { + if (supportsScroll) { handleScroll(router, route, current, true) } }) From f9585651dbcede28a3a48c47abad3200f655d776 Mon Sep 17 00:00:00 2001 From: Liu Xinyu Date: Tue, 24 Oct 2017 20:00:03 +0800 Subject: [PATCH 013/133] chore: define the components using PascalCase (#1842) --- src/components/link.js | 2 +- src/components/view.js | 2 +- src/install.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/link.js b/src/components/link.js index 48d034e47..10d3d118d 100644 --- a/src/components/link.js +++ b/src/components/link.js @@ -8,7 +8,7 @@ const toTypes: Array = [String, Object] const eventTypes: Array = [String, Array] export default { - name: 'router-link', + name: 'RouterLink', props: { to: { type: toTypes, diff --git a/src/components/view.js b/src/components/view.js index 0534c5e55..f0497cd1b 100644 --- a/src/components/view.js +++ b/src/components/view.js @@ -1,7 +1,7 @@ import { warn } from '../util/warn' export default { - name: 'router-view', + name: 'RouterView', functional: true, props: { name: { diff --git a/src/install.js b/src/install.js index 8d900625a..ee8506aa8 100644 --- a/src/install.js +++ b/src/install.js @@ -43,8 +43,8 @@ export function install (Vue) { get () { return this._routerRoot._route } }) - Vue.component('router-view', View) - Vue.component('router-link', Link) + Vue.component('RouterView', View) + Vue.component('RouterLink', Link) const strats = Vue.config.optionMergeStrategies // use the same hook merging strategy for route hooks From 446272fb02ab0338c9691cc2f89c0786914c2e1c Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 24 Oct 2017 18:18:24 +0200 Subject: [PATCH 014/133] [Doc EN]: Official Vue way to speak about a version and greater version. (#1841) * VueRouter vs. Vue Router Signed-off-by: Bruno Lesieur * `VueRouter` vs. Vue Router * no changes for EN docs. Signed-off-by: Bruno Lesieur * New review from @rspt Signed-off-by: Bruno Lesieur * Introduce @rspt review Signed-off-by: Bruno Lesieur * @posva review Signed-off-by: Bruno Lesieur * Update documentation with version 2.5 Signed-off-by: Bruno Lesieur * Little fixes Signed-off-by: Bruno Lesieur * Add + to version Signed-off-by: Bruno Lesieur * Little french fix Signed-off-by: Bruno Lesieur --- docs/en/SUMMARY.md | 2 +- docs/fr/essentials/passing-props.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index d64207969..3fb1abf3a 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -1,6 +1,6 @@ # vue-router 2 -> Note: for TypeScript users, vue-router@>= 3.0 requires vue@>=2.5, and vice versa. +> Note: for TypeScript users, vue-router@3.0+ requires vue@2.5+, and vice versa. **[Release Notes](https://github.com/vuejs/vue-router/releases)** diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md index 2e6978dd9..814f41f04 100644 --- a/docs/fr/essentials/passing-props.md +++ b/docs/fr/essentials/passing-props.md @@ -4,7 +4,7 @@ Utiliser `$route` dans vos composants crée un couplage fort à la route qui va Pour découpler un composant de son routeur, utilisez les props : -** Couplé avec `$route`** +**Plutôt que de coupler avec `$route`** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -** Découplé avec les `props`** +**Découplez avec les `props`** ``` js const User = { From deb48e943e054a24b928ba365ef652f37291fc00 Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Wed, 25 Oct 2017 10:39:10 +0300 Subject: [PATCH 015/133] [RU] Translation update (#1844) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * navigation-guards.md нумерация версии * history-mode.md правки по IIS * lazy-loading HTTPS * dynamic-mathcing.md HTTPS * getting-started.md HTTPS * navigation.md мелкие правки * nested-routes.md HTTPS * navigation-guards.md правки * history-mode.md кавычки и добавлена секция про Firebase * redirect-and-alias.md добавлено уточнение * SUMMARY.md правка * options.md обновлён пример сигнатуры * getting-started.md добавлены новые правки * navigation-guards.md новые правки * scroll-behavior.md новые правки * getting-started.md опечатки * SUMMARY.md правка версий * passing-props.md правка --- docs/ru/SUMMARY.md | 2 +- docs/ru/essentials/passing-props.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/ru/SUMMARY.md b/docs/ru/SUMMARY.md index 91c1cc97f..1c6e96fab 100644 --- a/docs/ru/SUMMARY.md +++ b/docs/ru/SUMMARY.md @@ -1,6 +1,6 @@ # Vue-router 2 -> Примечание: для пользователей TypeScript, vue-router@>= 3.0 требуется vue@>=2.5, и наоборот. +> Примечание: для пользователей TypeScript, vue-router@3.0+ требуется vue@2.5+, и наоборот. **[История изменений](https://github.com/vuejs/vue-router/releases)** diff --git a/docs/ru/essentials/passing-props.md b/docs/ru/essentials/passing-props.md index 082ba7fc4..282d09677 100644 --- a/docs/ru/essentials/passing-props.md +++ b/docs/ru/essentials/passing-props.md @@ -2,9 +2,9 @@ Использование `$route` в вашем компоненте создаёт жёсткую связь с маршрутом, что ограничивает гибкость компонента, потому что он может быть использован только для определённых URL-адресов. -Для разделения компонента от маршрутизатора можно использовать входные данные: +Для разделения компонента от маршрутизатора можно использовать входные параметры: -** Жёсткая связь с `$route`** +** Вместо жёсткой связи с `$route`** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -** Разделение с помощью входных параметров** +** Разделяем с помощью входных параметров** ``` js const User = { From 0370f707a4c58c71ba426df67eff1176daacd322 Mon Sep 17 00:00:00 2001 From: Magicansk <30593595+magicansk@users.noreply.github.com> Date: Sat, 28 Oct 2017 23:44:01 +0800 Subject: [PATCH 016/133] Update SUMMARY.md (#1853) --- docs/zh-cn/SUMMARY.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index 4c9779d0a..cf6cbc3e3 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -38,4 +38,4 @@ - [路由信息对象](api/route-object.md) - [对组件注入](api/component-injections.md) - [router-link](api/router-link.md) - - [router-view](api/router-view.md)) + - [router-view](api/router-view.md) From feeade6f2a57dc7a9720313e29676ea84698b71d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Mon, 6 Nov 2017 10:47:59 +0800 Subject: [PATCH 017/133] [zh-cn] synced from #10b7de7 to #ef4a046 (#1820) * [zh-cn] synced recent updates * [zh-cn] translation * [zh-cn] typo --- docs/zh-cn/SUMMARY.md | 6 ++--- docs/zh-cn/advanced/navigation-guards.md | 25 ++++++++++++++++++-- docs/zh-cn/advanced/scroll-behavior.md | 20 +++++++++++++++- docs/zh-cn/api/options.md | 9 +++++-- docs/zh-cn/essentials/getting-started.md | 26 +++++++++++++++++++-- docs/zh-cn/essentials/history-mode.md | 20 +++++++++++++++- docs/zh-cn/essentials/redirect-and-alias.md | 2 ++ 7 files changed, 97 insertions(+), 11 deletions(-) diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index cf6cbc3e3..bd5c8124d 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -1,7 +1,7 @@ # vue-router 2 - -> 注意: vue-router@2.x 只适用于 Vue 2.x。0.7.x 版本的文档请[移步这里](https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn)。 - + +> 注意：对于 TypeScript 用户来说，vue-router@>= 3.0 依赖 vue@>=2.5，反之亦然。 + **[版本说明](https://github.com/vuejs/vue-router/releases)** - [安装](installation.md) diff --git a/docs/zh-cn/advanced/navigation-guards.md b/docs/zh-cn/advanced/navigation-guards.md index 6e382ade4..91d8ba13f 100644 --- a/docs/zh-cn/advanced/navigation-guards.md +++ b/docs/zh-cn/advanced/navigation-guards.md @@ -32,7 +32,7 @@ router.beforeEach((to, from, next) => { - **`next(false)`**: 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 `from` 路由对应的地址。 - - **`next('/')` 或者 `next({ path: '/' })`**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。 + - **`next('/')` 或者 `next({ path: '/' })`**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 `next` 传递任意位置对象，且允许设置诸如 `replace: true`、`name: 'home'` 之类的选项以及任何用在 [`router-link` 的 `to` prop](../api/router-link.md) 或 [`router.push`](../api/router-instance.md#方法) 中的选项。 - **`next(error)`**: (2.4.0+) 如果传入 `next` 的参数是一个 `Error` 实例，则导航会被终止且该错误会被传递给 `router.onError()` 注册过的回调。 @@ -115,7 +115,28 @@ beforeRouteEnter (to, from, next) { } ``` -你可以 在 `beforeRouteLeave` 中直接访问 `this`。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。可以通过 `next(false)` 来取消导航。 +注意 `beforeRouteEnter` 是支持给 `next` 传递回调的唯一守卫。对于 `beforeRouteUpdate` 和 `beforeRouteLeave` 来说，`this` 已经可用了，所以**不支持**传递回调，因为没有必要了。 + +```js +beforeRouteUpdate (to, from, next) { + // just use `this` + this.name = to.params.name + next() +} +``` + +这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 `next(false)` 来取消。 + +```js +beforeRouteLeave (to, from , next) { + const answer = window.confirm('Do you really want to leave? you have unsaved changes!') + if (answer) { + next() + } else { + next(false) + } +} +``` ### 完整的导航解析流程 diff --git a/docs/zh-cn/advanced/scroll-behavior.md b/docs/zh-cn/advanced/scroll-behavior.md index 45c66dde4..a71868071 100644 --- a/docs/zh-cn/advanced/scroll-behavior.md +++ b/docs/zh-cn/advanced/scroll-behavior.md @@ -2,7 +2,7 @@ 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 `vue-router` 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 -**注意: 这个功能只在 HTML5 history 模式下可用。** +**注意: 这个功能只在支持 `history.pushState` 的浏览器中可用。** 当创建一个 Router 实例，你可以提供一个 `scrollBehavior` 方法： @@ -59,3 +59,21 @@ scrollBehavior (to, from, savedPosition) { ``` 我们还可以利用[路由元信息](meta.md)更细颗粒度地控制滚动。查看完整例子请[移步这里](https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js)。 + +### 异步滚动 + +> 2.8.0 新增 + +你也可以返回一个 Promise 来得出预期的位置描述： + +``` js +scrollBehavior (to, from, savedPosition) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve({ x: 0, y: 0 }) + }, 500) + }) +} +``` + +将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的。但是考虑到用例的多样性和复杂性，我们仅提供这个原始的接口，以支持不同用户场景的具体实现。 diff --git a/docs/zh-cn/api/options.md b/docs/zh-cn/api/options.md index 6b60fabe9..bb41d6009 100644 --- a/docs/zh-cn/api/options.md +++ b/docs/zh-cn/api/options.md @@ -74,11 +74,16 @@ 签名: ``` - ( + type PositionDescriptor = + { x: number, y: number } | + { selector: string } | + ?{} + + type scrollBehaviorHandler = ( to: Route, from: Route, savedPosition?: { x: number, y: number } - ) => { x: number, y: number } | { selector: string } | ?{} + ) => PositionDescriptor | Promise ``` 更多详情参考[滚动行为](../advanced/scroll-behavior.md)。 diff --git a/docs/zh-cn/essentials/getting-started.md b/docs/zh-cn/essentials/getting-started.md index f17e55a4a..d763a8acc 100644 --- a/docs/zh-cn/essentials/getting-started.md +++ b/docs/zh-cn/essentials/getting-started.md @@ -63,7 +63,29 @@ const app = new Vue({ // 现在，应用已经启动了！ ``` -你可以看看这个例子 -[live](https://jsfiddle.net/yyx990803/xgrjzsup/)。 +通过注入路由，我们可以用 `this.$router` 来访问它，就像在任何组件里用 `this.$router` 访问当前路有一样。 + +```js +// Home.vue +export default { + computed: { + username () { + // 我们很快就会看到 `params` 是什么 + return this.$route.params.username + } + }, + methods: { + goBack () { + window.history.length > 1 + ? this.$router.go(-1) + : this.$router.push('/') + } + } +} +``` + +该文档通篇都常使用 `router` 实例。留意一下 `this.$router` 和 `router` 使用起来完全一样。我们使用 `this.$router` 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。 + +你可以看看这个[在线的](https://jsfiddle.net/yyx990803/xgrjzsup/)例子。 要注意，当 `` 对应的路由匹配成功，将自动设置 class 属性值 `.router-link-active`。查看 [API 文档](../api/router-link.md) 学习更多相关内容。 diff --git a/docs/zh-cn/essentials/history-mode.md b/docs/zh-cn/essentials/history-mode.md index 23f94da15..9f28229fd 100644 --- a/docs/zh-cn/essentials/history-mode.md +++ b/docs/zh-cn/essentials/history-mode.md @@ -50,7 +50,7 @@ const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { - console.log('We cannot open 'index.htm' file.') + console.log('We cannot open "index.htm" file.') } res.writeHead(200, { @@ -102,6 +102,24 @@ rewrite { } ``` +#### Firebase 主机 + +在你的 `firebase.json` 中加入： + +``` +{ + "hosting": { + "public": "dist", + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} +``` + ## 警告 给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 `index.html` 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。 diff --git a/docs/zh-cn/essentials/redirect-and-alias.md b/docs/zh-cn/essentials/redirect-and-alias.md index 2d93ef0b5..643f28827 100644 --- a/docs/zh-cn/essentials/redirect-and-alias.md +++ b/docs/zh-cn/essentials/redirect-and-alias.md @@ -35,6 +35,8 @@ const router = new VueRouter({ }) ``` +注意[导航守卫](../advanced/navigation-guards.md)并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为 `/a` 路由添加一个 `beforeEach` 或 `beforeLeave` 守卫并不会有任何效果。 + 其它高级用法，请参考[例子](https://github.com/vuejs/vue-router/blob/next/examples/redirect/app.js)。 ### 别名 From f164e87cb824327f67bb8e34cec671264dcc65a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Tue, 7 Nov 2017 20:51:04 +0800 Subject: [PATCH 018/133] [zh-cn] synced from #0039fa4 to #0370f70 (#1865) * [zh-cn] synced from #0039fa4 to #0370f70 * Update SUMMARY.md --- docs/zh-cn/SUMMARY.md | 2 +- docs/zh-cn/essentials/passing-props.md | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index bd5c8124d..2d22df631 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -1,6 +1,6 @@ # vue-router 2 -> 注意：对于 TypeScript 用户来说，vue-router@>= 3.0 依赖 vue@>=2.5，反之亦然。 +> 注意：对于 TypeScript 用户来说，vue-router@3.0+ 依赖 vue@2.5+，反之亦然。 **[版本说明](https://github.com/vuejs/vue-router/releases)** diff --git a/docs/zh-cn/essentials/passing-props.md b/docs/zh-cn/essentials/passing-props.md index e51bc610d..ac9828866 100644 --- a/docs/zh-cn/essentials/passing-props.md +++ b/docs/zh-cn/essentials/passing-props.md @@ -1,10 +1,10 @@ # 路由组件传参 -在组件中使用`$route`会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了其灵活性。 +在组件中使用 `$route` 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 -使用props将组件和路由解耦： +使用 `props` 将组件和路由解耦： -** 与$route耦合** +**取代与 `$route` 的耦合** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -** 使用props解耦** +**通过 `props` 解耦** ``` js const User = { @@ -28,7 +28,7 @@ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } - // 对于包含命名视图的路由，你必须分别为每个命名视图添加props选项： + // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, @@ -42,11 +42,11 @@ const router = new VueRouter({ ### 布尔模式 -如果props被设置为true，`route.params`将会被设置为组件属性。 +如果 `props` 被设置为 `true`，`route.params` 将会被设置为组件属性。 ### 对象模式 -如果props是一个对象，它会被按原样设置为组件属性。当props是静态的时候有用。 +如果 `props` 是一个对象，它会被按原样设置为组件属性。当 `props` 是静态的时候有用。 ``` js const router = new VueRouter({ @@ -58,7 +58,7 @@ const router = new VueRouter({ ### 函数模式 -你可以创建一个函数返回props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。 +你可以创建一个函数返回 `props`。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。 ``` js const router = new VueRouter({ @@ -68,8 +68,8 @@ const router = new VueRouter({ }) ``` -Url: `/search?q=vue` 会将 `{query: "vue"}` 作为属性传递给SearchUser组件。 +URL `/search?q=vue` 会将 `{query: 'vue'}` 作为属性传递给 `SearchUser` 组件。 -请尽可能保持props函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义props，请使用包装组件，这样vue才可以对状态变化做出反应。 +请尽可能保持 `props` 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 `props`，请使用包装组件，这样 Vue 才可以对状态变化做出反应。 更多高级用法，请查看[例子](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)。 From ce4f63f073f83e5b629684f533865e5ca3bd74cf Mon Sep 17 00:00:00 2001 From: Gareth Redfern Date: Tue, 7 Nov 2017 12:52:23 +0000 Subject: [PATCH 019/133] Fix typo (#1864) --- docs/en/essentials/named-views.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md index a02b58620..e72317803 100644 --- a/docs/en/essentials/named-views.md +++ b/docs/en/essentials/named-views.md @@ -1,6 +1,6 @@ # Named Views -Sometimes you need to display multiple views at the same time instead of nesting them, e.g. creating a layout with a `sidebar` view and a `main` view. This is where named views came in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A `router-view` without a name will be given `default` as its name. +Sometimes you need to display multiple views at the same time instead of nesting them, e.g. creating a layout with a `sidebar` view and a `main` view. This is where named views come in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A `router-view` without a name will be given `default` as its name. ``` html From c8328a9f79985516310eb1d6503df8b69c956af4 Mon Sep 17 00:00:00 2001 From: Florian Heckl Date: Thu, 16 Nov 2017 16:49:56 +0100 Subject: [PATCH 020/133] Corrected some typos (#1889) Corrected some typos (mainly Komponenente -> Komponente) and changed some of the wordings. --- docs/de/essentials/getting-started.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/de/essentials/getting-started.md b/docs/de/essentials/getting-started.md index 084e35f59..ded67b7c6 100644 --- a/docs/de/essentials/getting-started.md +++ b/docs/de/essentials/getting-started.md @@ -2,7 +2,7 @@ > Hinweis: Wir benutzen [ES2015](https://github.com/lukehoban/es6features) in den Code-Beispielen. -Eine Single-Page-Applikation mit Vue.js und vue-router zu erstellen ist wirklich simpel. Mit Vue.js stellen wir unsere App ja bereits aus Komponenenten zusammen. Wenn wir nun vue-router ins Spiel bringen, müssen wir lediglich unsere Komponenenten den "Routes" zuordnen und vue-router mitteilen, wo diese Komponenenten gerendert werden sollen. Hier ein einfaches Beispiel: +Eine Single-Page-Applikation mit Vue.js und vue-router zu erstellen ist wirklich simpel. Mit Vue.js stellen wir unsere App ja bereits aus Komponenten zusammen. Wenn wir nun vue-router ins Spiel bringen, müssen wir lediglich unsere Komponenten den "Routes" zuordnen und vue-router mitteilen, wo diese Komponenten gerendert werden sollen. Hier ein einfaches Beispiel: > Alle Beispiele nutzen die Standalone-Version von Vue, um Template-Parsing nutzen zu können. Mehr Details [hier (englisch)](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build) @@ -30,18 +30,18 @@ Eine Single-Page-Applikation mit Vue.js und vue-router zu erstellen ist wirklich ### JavaScript ``` js -// 0. Wenn du Module-System wie Webpack oder Browserify benutzt, (zB. via vue-cli), importiere Vue sowie VueRouter und rufe Vue.use(VueRouter) auf. +// 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-Komponenenten +// 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 Komponenente verbunden sein. -// Die Komponenente kann entweder eine tatsächliche Komponente sein, die via Vue.extend() erstellt wird, -// ein Komponenten-ID-String der via Vue.component() registriert wurde, -// oder lediglich ein Optionsobjekt der Komponenente. +// Jede Route sollte mit einer Komponente verbunden sein. +// Die Komponente kann entweder eine tatsächliche Komponente sein, die via Vue.extend() erstellt wird, +// ein Komponenten-ID-String, der via Vue.component() registriert wurde, +// oder lediglich ein Optionsobjekt der Komponente. // Hinweis: Verschachtelte (engl: "nested") Routes werden später in dieser Anleitung behandelt. const routes = [ @@ -67,4 +67,4 @@ const app = new Vue({ ``` Das ganze gibt es natürlich auch als [Live-Beispiel](http://jsfiddle.net/yyx990803/xgrjzsup/). -Hinweis: `` erhält automatisch die CSS-class `.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). +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). From 8c16e1210d503cc48bb189f993935b5e45c38e36 Mon Sep 17 00:00:00 2001 From: 38elements <38elements@users.noreply.github.com> Date: Sat, 18 Nov 2017 01:38:04 +0900 Subject: [PATCH 021/133] Update docs/ja (#1877) * Update SUMMARY.md * Update navigation-guards.md --- docs/ja/SUMMARY.md | 2 +- docs/ja/advanced/navigation-guards.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md index 17209d165..0d1f1fce2 100644 --- a/docs/ja/SUMMARY.md +++ b/docs/ja/SUMMARY.md @@ -1,6 +1,6 @@ # vue-router 2 -> 注意: TypeScript ユーザ向けは、vue-router@>= 3.0 と vue@>=2.5 が必須、逆もまた同様です。 +> 注意: TypeScript ユーザ向けは、vue-router@3.0+ と vue@2.5+ が必須、逆もまた同様です。 **[リリースノート](https://github.com/vuejs/vue-router/releases)** diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index c0bba1ffa..9b815b86f 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -115,7 +115,7 @@ beforeRouteEnter (to, from, next) { } ``` -コールバックを `next` に渡すことをサポートするのは、`beforeRouteEnter`フックだけであるということに注意してください。`beforeRouteUpdate` と `beforeRouteLeave` の場合、 `this` は既に利用可能です。したがって、コールバックを渡す必要はないので、*サポートされません*: +コールバックを `next` に渡すことをサポートするのは、`beforeRouteEnter` ガードだけであるということに注意してください。`beforeRouteUpdate` と `beforeRouteLeave` の場合、 `this` は既に利用可能です。したがって、コールバックを渡す必要はないので、*サポートされません*: ```js beforeRouteUpdate (to, from, next) { From 07d0298ed1f1e0e7d625021e4d23ba89458d4769 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Fri, 17 Nov 2017 17:45:24 +0100 Subject: [PATCH 022/133] docs: remove version close #1801 --- docs/de/SUMMARY.md | 2 +- docs/en/SUMMARY.md | 2 +- docs/es/SUMMARY.md | 2 +- docs/fr/SUMMARY.md | 2 +- docs/ja/SUMMARY.md | 2 +- docs/kr/SUMMARY.md | 2 +- docs/ru/SUMMARY.md | 2 +- docs/zh-cn/SUMMARY.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/de/SUMMARY.md b/docs/de/SUMMARY.md index 8c82c57b3..c305a4705 100644 --- a/docs/de/SUMMARY.md +++ b/docs/de/SUMMARY.md @@ -1,4 +1,4 @@ -# vue-router 2 +# vue-router > Merke: vue-router@2.x ist nur mit Vue 2.x kompatibel. Dokumentation für 0.7.x ist [hier (englisch)](https://github.com/vuejs/vue-router/tree/1.0/docs/en) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index 3fb1abf3a..fc76fa1c2 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -1,4 +1,4 @@ -# vue-router 2 +# vue-router > Note: for TypeScript users, vue-router@3.0+ requires vue@2.5+, and vice versa. diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md index 95551035c..0974c1796 100644 --- a/docs/es/SUMMARY.md +++ b/docs/es/SUMMARY.md @@ -1,4 +1,4 @@ -# vue-router 2 +# 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). diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index 8b87aaab3..3fa9be3f1 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -1,4 +1,4 @@ -# vue-router 2 +# vue-router > Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite vue@2.5+, et inverssement. diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md index 0d1f1fce2..82a5aa7a7 100644 --- a/docs/ja/SUMMARY.md +++ b/docs/ja/SUMMARY.md @@ -1,4 +1,4 @@ -# vue-router 2 +# vue-router > 注意: TypeScript ユーザ向けは、vue-router@3.0+ と vue@2.5+ が必須、逆もまた同様です。 diff --git a/docs/kr/SUMMARY.md b/docs/kr/SUMMARY.md index d0d487377..15e1fbdff 100644 --- a/docs/kr/SUMMARY.md +++ b/docs/kr/SUMMARY.md @@ -1,4 +1,4 @@ -# vue-router 2 +# vue-router > 참고 : vue-router@2.x는 Vue 2.x에서만 작동합니다. 0.7.x용 문서는 [이 곳](https://github.com/vuejs/vue-router/tree/1.0/docs/en)입니다. diff --git a/docs/ru/SUMMARY.md b/docs/ru/SUMMARY.md index 1c6e96fab..240781a3c 100644 --- a/docs/ru/SUMMARY.md +++ b/docs/ru/SUMMARY.md @@ -1,4 +1,4 @@ -# Vue-router 2 +# vue-router > Примечание: для пользователей TypeScript, vue-router@3.0+ требуется vue@2.5+, и наоборот. diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index 2d22df631..eee0608ac 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -1,4 +1,4 @@ -# vue-router 2 +# vue-router > 注意：对于 TypeScript 用户来说，vue-router@3.0+ 依赖 vue@2.5+，反之亦然。 From c8376661e343a055c6d5a037509f70f5cdaf64be Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Fri, 17 Nov 2017 19:41:59 +0100 Subject: [PATCH 023/133] fix(errors): throws with invalid route objects (#1893) --- test/unit/specs/create-map.spec.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/test/unit/specs/create-map.spec.js b/test/unit/specs/create-map.spec.js index 9d8e62f36..67fba131a 100644 --- a/test/unit/specs/create-map.spec.js +++ b/test/unit/specs/create-map.spec.js @@ -71,6 +71,13 @@ describe('Creating Route Map', function () { expect(console.warn.calls.argsFor(0)[0]).toMatch('vue-router] Named Route \'bar\'') }) + it('in development, throws if path is missing', function () { + process.env.NODE_ENV = 'development' + expect(() => { + maps = createRouteMap([{ component: Bar }]) + }).toThrowError(/"path" is required/) + }) + it('in production, it has not logged this warning', function () { maps = createRouteMap(routes) expect(console.warn).not.toHaveBeenCalled() From 11c6614aa47abc18cb11327e7af0bda44a5a05df Mon Sep 17 00:00:00 2001 From: miyanokomiya Date: Mon, 20 Nov 2017 00:05:57 +0900 Subject: [PATCH 024/133] doc(ja) typo in variable names (#1894) * Typo fixes There are a few wrong variables. * Update named-routes.md --- docs/ja/essentials/named-routes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ja/essentials/named-routes.md b/docs/ja/essentials/named-routes.md index f1319f9ac..24946a609 100644 --- a/docs/ja/essentials/named-routes.md +++ b/docs/ja/essentials/named-routes.md @@ -6,7 +6,7 @@ const router = new VueRouter({ routes: [ { - path: '/user/:id', + path: '/user/:userId', name: 'user', component: User } From f617939127a838d489a13e7c617f266b1cf28d88 Mon Sep 17 00:00:00 2001 From: wangyi7099 Date: Mon, 20 Nov 2017 22:23:05 +0800 Subject: [PATCH 025/133] Update meta.md (#1897) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 还有在导航守卫中的路(有)对象 => 还有在导航守卫中的路(由)对象 --- docs/zh-cn/advanced/meta.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/advanced/meta.md b/docs/zh-cn/advanced/meta.md index 2d8421d82..235fc3e53 100644 --- a/docs/zh-cn/advanced/meta.md +++ b/docs/zh-cn/advanced/meta.md @@ -27,7 +27,7 @@ const router = new VueRouter({ 例如，根据上面的路由配置，`/foo/bar` 这个 URL 将会匹配父路由记录以及子路由记录。 -一个路由匹配到的所有路由记录会暴露为 `$route` 对象（还有在导航守卫中的路有对象）的 `$route.matched` 数组。因此，我们需要遍历 `$route.matched` 来检查路由记录中的 `meta` 字段。 +一个路由匹配到的所有路由记录会暴露为 `$route` 对象（还有在导航守卫中的路由对象）的 `$route.matched` 数组。因此，我们需要遍历 `$route.matched` 来检查路由记录中的 `meta` 字段。 下面例子展示在全局导航守卫中检查元字段： From 09b772edeb0563f1eb7cb09740519f6cd1400d5b Mon Sep 17 00:00:00 2001 From: KevinElberger Date: Sat, 25 Nov 2017 09:39:42 -0800 Subject: [PATCH 026/133] docs(typo): add missing comma (#1903) Add missing comma to routes list example --- docs/en/essentials/passing-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/essentials/passing-props.md b/docs/en/essentials/passing-props.md index ee5534bf7..38ddd16db 100644 --- a/docs/en/essentials/passing-props.md +++ b/docs/en/essentials/passing-props.md @@ -26,7 +26,7 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User, props: true } + { path: '/user/:id', component: User, props: true }, // for routes with named views, you have to define the `props` option for each named view: { From 20901892f4d7cefd264f5c3db2f2696ce5864d20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Mon, 27 Nov 2017 03:03:23 +0800 Subject: [PATCH 027/133] [docs] removed version number from LANGS.md (#1908) --- docs/LANGS.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/LANGS.md b/docs/LANGS.md index 2af5399fd..2c30e8eec 100644 --- a/docs/LANGS.md +++ b/docs/LANGS.md @@ -1,9 +1,9 @@ -* [2.0 - English](en/) -* [2.0 - French](fr/) -* [2.0 - Japanese](ja/) -* [2.0 - 中文](zh-cn/) -* [2.0 - German](de/) -* [2.0 - Русский](ru/) -* [2.0 - 한국어(Korean)](kr/) -* [2.0 - Español](es/) +* [English](en/) +* [French](fr/) +* [Japanese](ja/) +* [中文](zh-cn/) +* [German](de/) +* [Русский](ru/) +* [한국어(Korean)](kr/) +* [Español](es/) * [0.7 Docs](old/) From 3cdb3d597f8585d6fc481d9b709b200df27f38f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Mon, 27 Nov 2017 03:03:51 +0800 Subject: [PATCH 028/133] [docs] fixed #1897 to other languages (#1907) --- docs/es/essentials/passing-props.md | 4 ++-- docs/ja/essentials/passing-props.md | 2 +- docs/kr/essentials/passing-props.md | 2 +- docs/ru/essentials/passing-props.md | 2 +- docs/zh-cn/essentials/passing-props.md | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/es/essentials/passing-props.md b/docs/es/essentials/passing-props.md index 1ac6a8785..cda173470 100644 --- a/docs/es/essentials/passing-props.md +++ b/docs/es/essentials/passing-props.md @@ -26,11 +26,11 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User, props: true } + { 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', + path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } diff --git a/docs/ja/essentials/passing-props.md b/docs/ja/essentials/passing-props.md index 056d3c8f2..2de0caad4 100644 --- a/docs/ja/essentials/passing-props.md +++ b/docs/ja/essentials/passing-props.md @@ -26,7 +26,7 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User, props: true } + { path: '/user/:id', component: User, props: true }, // 名前付きビューによるルートに対しては、名前付きビューごとに `props` オプションを定義しなければなりません: { diff --git a/docs/kr/essentials/passing-props.md b/docs/kr/essentials/passing-props.md index 9a1da1089..f4c8379ee 100644 --- a/docs/kr/essentials/passing-props.md +++ b/docs/kr/essentials/passing-props.md @@ -26,7 +26,7 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User, props: true } + { path: '/user/:id', component: User, props: true }, ] }) ``` diff --git a/docs/ru/essentials/passing-props.md b/docs/ru/essentials/passing-props.md index 282d09677..972dd03e5 100644 --- a/docs/ru/essentials/passing-props.md +++ b/docs/ru/essentials/passing-props.md @@ -26,7 +26,7 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User, props: true } + { path: '/user/:id', component: User, props: true }, // для маршрутов с именованными представлениями, необходимо указывать опцию `props` для каждого именованного представления: { diff --git a/docs/zh-cn/essentials/passing-props.md b/docs/zh-cn/essentials/passing-props.md index ac9828866..34233ccd5 100644 --- a/docs/zh-cn/essentials/passing-props.md +++ b/docs/zh-cn/essentials/passing-props.md @@ -26,7 +26,7 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User, props: true } + { path: '/user/:id', component: User, props: true }, // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项： { From d543ca9e41135320e018d41ccdb8ff0acf0b931e Mon Sep 17 00:00:00 2001 From: Lonre Wang Date: Mon, 27 Nov 2017 03:05:05 +0800 Subject: [PATCH 029/133] Fix typo (#1891) --- docs/zh-cn/essentials/dynamic-matching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/essentials/dynamic-matching.md b/docs/zh-cn/essentials/dynamic-matching.md index 80b581b46..b2e374b6b 100644 --- a/docs/zh-cn/essentials/dynamic-matching.md +++ b/docs/zh-cn/essentials/dynamic-matching.md @@ -39,7 +39,7 @@ const User = { ### 响应路由参数的变化 -提醒一下，当使用路由参数时，例如从 `/user/foo` 导航到 `user/bar`，**原来的组件实例会被复用**。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。**不过，这也意味着组件的生命周期钩子不会再被调用**。 +提醒一下，当使用路由参数时，例如从 `/user/foo` 导航到 `/user/bar`，**原来的组件实例会被复用**。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。**不过，这也意味着组件的生命周期钩子不会再被调用**。 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） `$route` 对象： From c30daa90be1f8119ffdc0be451292318323cde7f Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 4 Dec 2017 09:49:51 +0100 Subject: [PATCH 030/133] [Doc FR]: `fix typo` (#1913) * VueRouter vs. Vue Router Signed-off-by: Bruno Lesieur * `VueRouter` vs. Vue Router * no changes for EN docs. Signed-off-by: Bruno Lesieur * New review from @rspt Signed-off-by: Bruno Lesieur * Introduce @rspt review Signed-off-by: Bruno Lesieur * @posva review Signed-off-by: Bruno Lesieur * Update documentation with version 2.5 Signed-off-by: Bruno Lesieur * Little fixes Signed-off-by: Bruno Lesieur * Add + to version Signed-off-by: Bruno Lesieur * Little french fix Signed-off-by: Bruno Lesieur * Typo fix Signed-off-by: Bruno Lesieur --- docs/fr/essentials/passing-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md index 814f41f04..e1a27486f 100644 --- a/docs/fr/essentials/passing-props.md +++ b/docs/fr/essentials/passing-props.md @@ -26,7 +26,7 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/utilisateur/:id', component: User, props: true } + { path: '/utilisateur/:id', component: User, props: true }, // pour les routes avec vues nommées, vous devez définir l'option `props` pour chaque vue nommée : { From c06e623d31aa0764009091f398ae44f274f8c112 Mon Sep 17 00:00:00 2001 From: smonkey72 Date: Thu, 7 Dec 2017 13:54:02 +0100 Subject: [PATCH 031/133] remove outdated comment (#1845) --- docs/de/essentials/getting-started.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/de/essentials/getting-started.md b/docs/de/essentials/getting-started.md index ded67b7c6..04fc90703 100644 --- a/docs/de/essentials/getting-started.md +++ b/docs/de/essentials/getting-started.md @@ -39,9 +39,8 @@ const Bar = { template: '
    bar
    ' } // 2. Definiere ein paar Routes // Jede Route sollte mit einer Komponente verbunden sein. -// Die Komponente kann entweder eine tatsächliche Komponente sein, die via Vue.extend() erstellt wird, -// ein Komponenten-ID-String, der via Vue.component() registriert wurde, -// oder lediglich ein Optionsobjekt der Komponente. +// 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 = [ From b132d4b17c29a773934d7e403571e7c0983e3735 Mon Sep 17 00:00:00 2001 From: Miguel Piedrafita Date: Sun, 31 Dec 2017 13:47:45 +0100 Subject: [PATCH 032/133] Avoid updating license every year (#1957) Uses the same template as in main repo to avoid recieving a PR every year. --- LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index 286372575..888e2ccda 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2013-2016 Evan You +Copyright (c) 2013-present Evan You Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal From 1227d8c1abb94c4ba2373d1c9ffd88f5476036b9 Mon Sep 17 00:00:00 2001 From: Mathieu Derelle Date: Sun, 7 Jan 2018 11:13:14 +0100 Subject: [PATCH 033/133] typo in doc (#1966) --- docs/fr/essentials/dynamic-matching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/essentials/dynamic-matching.md b/docs/fr/essentials/dynamic-matching.md index 9f84d99c5..9b40b3438 100644 --- a/docs/fr/essentials/dynamic-matching.md +++ b/docs/fr/essentials/dynamic-matching.md @@ -38,7 +38,7 @@ En plus de `$route.params`, l'objet `$route` expose également d'autres informat ### 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 dans créer une nouvelle. **Cependant, cela signifie également que les hooks de cycle de vie ne seront pas appelés**. +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` : From 0ecd68a9ba57199b7fa211471d3b7433fda4ea59 Mon Sep 17 00:00:00 2001 From: ts0307 Date: Tue, 9 Jan 2018 01:26:19 +0800 Subject: [PATCH 034/133] =?UTF-8?q?chore(docs):=20=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E6=9C=89=E8=AF=AF=20(#1970)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit One consequence of this is that will be active for every route! =>按照这个规则，`` 将会点亮各个路由！ 翻译有误，应该改为： 按照这个规则，每个路由都会激活`` ！ --- docs/zh-cn/api/router-link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/api/router-link.md b/docs/zh-cn/api/router-link.md index a6af69f05..e950614fe 100644 --- a/docs/zh-cn/api/router-link.md +++ b/docs/zh-cn/api/router-link.md @@ -99,7 +99,7 @@ "是否激活" 默认类名的依据是 **inclusive match** （全包含匹配）。 举个例子，如果当前的路径是 `/a` 开头的，那么 `` 也会被设置 CSS 类名。 - 按照这个规则，`` 将会点亮各个路由！想要链接使用 "exact 匹配模式"，则使用 `exact` 属性： + 按照这个规则，每个路由都会激活``！想要链接使用 "exact 匹配模式"，则使用 `exact` 属性： ``` html From 81e6ce0f8e38417ec2822ab3c704563e1ebdec38 Mon Sep 17 00:00:00 2001 From: Dan Rumney Date: Mon, 8 Jan 2018 17:08:50 -0600 Subject: [PATCH 035/133] chore(docs): add link to onError Closes #1973 (#1974) --- docs/en/advanced/navigation-guards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/advanced/navigation-guards.md b/docs/en/advanced/navigation-guards.md index 67ab1aa12..5217e958d 100644 --- a/docs/en/advanced/navigation-guards.md +++ b/docs/en/advanced/navigation-guards.md @@ -32,7 +32,7 @@ Every guard function receives three arguments: - **`next('/')` or `next({ path: '/' })`**: redirect to a different location. The current navigation will be aborted and a new one will be started. You can pass any location object to `next`, which allows you to specify options like `replace: true`, `name: 'home'` and any option used in [`router-link`'s `to` prop](../api/router-link.md) or [`router.push`](../api/router-instance.md#methods) - - **`next(error)`**: (2.4.0+) if the argument passed to `next` is an instance of `Error`, the navigation will be aborted and the error will be passed to callbacks registered via `router.onError()`. + - **`next(error)`**: (2.4.0+) if the argument passed to `next` is an instance of `Error`, the navigation will be aborted and the error will be passed to callbacks registered via [`router.onError()`](../api/router-instance.html#methods). **Make sure to always call the `next` function, otherwise the hook will never be resolved.** From 9e78ca2ff5dcba5cc23629d870cba2e2367b4a86 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 10 Jan 2018 17:40:04 +0100 Subject: [PATCH 036/133] docs: add example of nested named routes (#1931) * docs: add example of nested named routes Closes #1921 * docs: add link of jsfiddle in note * review * [skip ci] review --- docs/en/essentials/named-views.md | 57 +++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md index e72317803..b964fdb71 100644 --- a/docs/en/essentials/named-views.md +++ b/docs/en/essentials/named-views.md @@ -27,3 +27,60 @@ const router = new VueRouter({ ``` A working demo of this example can be found [here](https://jsfiddle.net/posva/6du90epg/). + +## Nested Named Views + +It is possible to create complex layouts using named views with nested views. When doing so, you will also need to name nested `router-view` components used. Let's take a Settings panel example: + +``` +/settings/emails /settings/profile ++-----------------------------------+ +------------------------------+ +| UserSettings | | UserSettings | +| +-----+-------------------------+ | | +-----+--------------------+ | +| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | +| | +-------------------------+ | | | +--------------------+ | +| | | | | | | | UserProfilePreview | | +| +-----+-------------------------+ | | +-----+--------------------+ | ++-----------------------------------+ +------------------------------+ +``` + +- `Nav` is just a regular compnonent +- `UserSettings` is the view comopnent +- `UserEmailsSubscriptions`, `UserProfile`, `UserProfilePreview` are nested view components + +**Note**: _Let's forget about how the HTML/CSS should look like to represent such layout and focus on the components used_ + +The `