diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index e1cc570e3..623c3cc16 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -91,8 +91,8 @@ const Foo = { beforeRouteUpdate (to, from, next) { // このコンポーネントを描画するルートが変更されたときに呼び出されますが、 // このコンポーネントは新しいルートで再利用されます。 - // たとえば、動的な引数 /foo/:id を持つルートの場合、/foo/1 と /foo/2 の間を移動すると、 - // 同じ Foo コンポーネントインスタンスが再利用され、そのときにこのフックが呼び出されます。 + // たとえば、動的な引数 `/foo/:id` を持つルートの場合、`/foo/1` と `/foo/2` の間を移動すると、 + // 同じ `Foo` コンポーネントインスタンスが再利用され、そのときにこのフックが呼び出されます。 // `this` でコンポーネントインスタンスにアクセスできます。 }, beforeRouteLeave (to, from, next) { diff --git a/docs/ja/essentials/history-mode.md b/docs/ja/essentials/history-mode.md index 106d83c1d..d07bf91a9 100644 --- a/docs/ja/essentials/history-mode.md +++ b/docs/ja/essentials/history-mode.md @@ -40,12 +40,37 @@ location / { } ``` +#### Native Node.js + +```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('We cannot open "index.htm" file.') + } + + res.writeHead(200, { + "Content-Type": "text/html; charset=utf-8" + }) + + res.end(content) + }) +}).listen(httpPort, () => { + console.log("Server listening on: http://localhost:%s", httpPort) +}) +``` + #### Node.js (Express) Node.js/Express では [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback) の利用を検討してください。 #### Internet Information Services (IIS) -``` + +``` xml @@ -61,10 +86,10 @@ Node.js/Express では [connect-history-api-fallback middleware](https://github. - - + + - + @@ -72,6 +97,15 @@ Node.js/Express では [connect-history-api-fallback middleware](https://github. ``` +#### Caddy + +``` +rewrite { + regexp .* + to {path} / +} +``` + ## 注意 この点に関して注意があります。全ての not-found パスが `index.html` を提供するため、もはや 404 エラーをサーバーがレポートしなくなります。回避策として、Vue アプリケーション内で 404 ページを表示するために catch-all ルートを実装すべきです。 @@ -85,4 +119,4 @@ const router = new VueRouter({ }) ``` -他の方法として、もしあなたが Node.js サーバーを使っている場合、入ってきた URL とマッチさせて、マッチしなかった場合に 404 を返答するサーバーサイドのルーターを使って fallback を実装することもできます。 +他の方法として、もしあなたが Node.js サーバーを使っている場合、入ってきた URL とマッチさせて、マッチしなかった場合に 404 を返答するサーバーサイドのルーターを使って fallback を実装することもできます。詳細については [Vue サーバサイドレンダリングのドキュメント](https://ssr.vuejs.org/ja/) を参照してください。 diff --git a/docs/ja/essentials/passing-props.md b/docs/ja/essentials/passing-props.md index 1587d7d6c..338280220 100644 --- a/docs/ja/essentials/passing-props.md +++ b/docs/ja/essentials/passing-props.md @@ -2,9 +2,9 @@ コンポーネントで `$route` を使うとコンポーネントとルートの間に密結合が生まれ、コンポーネントが特定のURLでしか使用できないなど柔軟性が制限されます。 -コンポーネントをルーターから分離するためにプロパティを使います: +コンポーネントをルーターから分離するために `props` オプションを使います: -**❌ $route に結合** +**❌ `$route` に結合** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 プロパティによる分離** +**👍 `props` による分離** ``` js const User = { @@ -28,9 +28,9 @@ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } - // 名前付きビューによるルートに対しては、名前付きビューごとに props オプションを定義しなければなりません: + // 名前付きビューによるルートに対しては、名前付きビューごとに `props` オプションを定義しなければなりません: { - path: '/user/:id', + path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } @@ -42,12 +42,11 @@ const router = new VueRouter({ ### Boolean モード -props を true に設定すると、route.params がコンポーネントのプロパティとして設定されます。 +`props` を `true` に設定すると、`route.params` がコンポーネントのプロパティとして設定されます。 ### Object モード -props がオブジェクトの場合、これはコンポーネントプロパティとしてそのまま設定されます。 -プロパティが静的なときに便利です。 +`props` がオブジェクトの場合、これはコンポーネントプロパティとしてそのまま設定されます。プロパティが静的なときに便利です。 ``` js const router = new VueRouter({ @@ -59,8 +58,7 @@ const router = new VueRouter({ ### Function モード -プロパティを返す関数を作成することができます。 -これにより、パラメータを別のタイプにキャストし、静的な値をルートベースの値などと組み合わせることができます。 +プロパティを返す関数を作成することができます。これにより、パラメータを他のタイプにキャストし、静的な値をルートベースの値などと組み合わせることができます。 ``` js const router = new VueRouter({ @@ -70,8 +68,8 @@ const router = new VueRouter({ }) ``` -url `/search?q=vue` は `{query: "vue"}` をプロパティとして SearchUser コンポーネントに渡します。 +URL `/search?q=vue` は `{query: 'vue'}` をプロパティとして `SearchUser` コンポーネントに渡します。 -ルート変更時にのみ評価されるため、props 関数はステートレスにしてください。プロパティを定義するために状態を必要とする場合はラッパーコンポーネントを使用してください。その方法で vue は状態変更に対応することができます。 +ルート変更時にのみ評価されるため、`props` 関数はステートレスにしてください。プロパティを定義するために状態を必要とする場合はラッパーコンポーネントを使用してください。その方法で vue は状態変更に対応することができます。 高度な使い方については、[example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)を参照してください。 diff --git a/docs/ja/installation.md b/docs/ja/installation.md index d838ba1ff..2db7585bd 100644 --- a/docs/ja/installation.md +++ b/docs/ja/installation.md @@ -5,7 +5,7 @@ [https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js) -[Unpkg.com](https://unpkg.com) は NPM ベースの CDN リンクです。 上記のリンクは常に NPM 上の最新のリリースを指します。 `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js` のような URL を利用することで特定のバージョンやタグを指定することもできます。 +[Unpkg.com](https://unpkg.com) は npm ベースの CDN リンクです。 上記のリンクは常に NPM 上の最新のリリースを指します。 `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js` のような URL を利用することで特定のバージョンやタグを指定することもできます。 Vue の後に `vue-router` を含めると自動的にインストールされます。 @@ -15,7 +15,7 @@ Vue の後に `vue-router` を含めると自動的にインストールされ ``` -### NPM +### npm ``` bash npm install vue-router