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) をご参照ください。 ### エイリアス