diff --git a/README.md b/README.md
index f6364b997..16a747d52 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ pnpm run dev
## コンテンツに関する作業
-- サポートされている [Markdown 拡張](https://vitepress.vuejs.org/guide/markdown.html)や [Markdown 内で Vue 構文を使用する](https://vitepress.vuejs.org/guide/using-vue.html)機能については、VitePress ドキュメントを参照してください。
+- サポートされている [Markdown 拡張](https://vitepress.vuejs.org/guide/markdown)や [Markdown 内で Vue 構文を使用する](https://vitepress.vuejs.org/guide/using-vue)機能については、VitePress ドキュメントを参照してください。
-これは、ネイティブの HTML 要素をネストする方法ととてもよく似ていますが、Vue は独自のコンポーネントモデルを実装しており、各コンポーネントのカスタムコンテンツとロジックをカプセル化することができます。 Vue はまた、ネイティブの Web コンポーネントとうまく連携しています。 Vue コンポーネントとネイティブの Web コンポーネントの関係について興味があるようでしたら[こちらを参照してください](/guide/extras/web-components.html)。
+これは、ネイティブの HTML 要素をネストする方法ととてもよく似ていますが、Vue は独自のコンポーネントモデルを実装しており、各コンポーネントのカスタムコンテンツとロジックをカプセル化することができます。 Vue はまた、ネイティブの Web コンポーネントとうまく連携しています。 Vue コンポーネントとネイティブの Web コンポーネントの関係について興味があるようでしたら[こちらを参照してください](/guide/extras/web-components)。
## コンポーネントの定義 {#defining-a-component}
-ビルドステップを使用する場合は通常、各 Vue コンポーネントは専用のファイルで `.vue` 拡張子を使用して定義します。これは [単一ファイルコンポーネント](/guide/scaling-up/sfc.html)(略して SFC)として知られています:
+ビルドステップを使用する場合は通常、各 Vue コンポーネントは専用のファイルで `.vue` 拡張子を使用して定義します。これは [単一ファイルコンポーネント](/guide/scaling-up/sfc)(略して SFC)として知られています:
@@ -117,7 +117,7 @@ export default {
```
-インポートしたコンポーネントをテンプレートに公開するには、`components` オプションでコンポーネントを[登録](/guide/components/registration.html)する必要があります。これにより、そのコンポーネントは登録されたキーを使ってタグとして利用できるようになります。
+インポートしたコンポーネントをテンプレートに公開するには、`components` オプションでコンポーネントを[登録](/guide/components/registration)する必要があります。これにより、そのコンポーネントは登録されたキーを使ってタグとして利用できるようになります。
@@ -138,7 +138,7 @@ import ButtonCounter from './ButtonCounter.vue'
-また、コンポーネントをグローバル登録することで、インポートすることなくアプリケーション内のすべてのコンポーネントで利用できるようにすることもできます。グローバル登録とローカル登録のメリットとデメリットは、専用の[コンポーネントの登録](/guide/components/registration.html)セクションで説明されています。
+また、コンポーネントをグローバル登録することで、インポートすることなくアプリケーション内のすべてのコンポーネントで利用できるようにすることもできます。グローバル登録とローカル登録のメリットとデメリットは、専用の[コンポーネントの登録](/guide/components/registration)セクションで説明されています。
コンポーネントは好きなだけ、何度でも再利用可能です:
@@ -179,7 +179,7 @@ SFC では、ネイティブの HTML 要素と区別するために、子コン
ブログを構築する場合、ブログの記事を表示するコンポーネントが必要になるかと思います。すべてのブログ記事が同じレイアウトで表示されるようにしたいのですが、コンテンツは異なっています。このようなコンポーネントは、表示したい特定の記事のタイトルや内容などのデータを渡すことができない限り役に立ちません。そこでプロパティの出番です。
-プロパティはコンポーネントに登録できるカスタム属性のことです。ブログ記事コンポーネントにタイトルを渡すには、[`props`](/api/options-state.html#props) オプション[`defineProps`](/api/sfc-script-setup.html#defineprops-defineemits) マクロを使って、このコンポーネントが受け取るプロパティのリストを宣言する必要があります:
+プロパティはコンポーネントに登録できるカスタム属性のことです。ブログ記事コンポーネントにタイトルを渡すには、[`props`](/api/options-state#props) オプション[`defineProps`](/api/sfc-script-setup#defineprops-defineemits) マクロを使って、このコンポーネントが受け取るプロパティのリストを宣言する必要があります:
@@ -219,7 +219,7 @@ const props = defineProps(['title'])
console.log(props.title)
```
-参照:[コンポーネントプロパティの型付け](/guide/typescript/composition-api.html#typing-component-props)
+参照:[コンポーネントプロパティの型付け](/guide/typescript/composition-api#typing-component-props)
`
```
-参照:[コンポーネントの emit の型付け](/guide/typescript/composition-api.html#typing-component-emits)
+参照:[コンポーネントの emit の型付け](/guide/typescript/composition-api#typing-component-emits)
`
:::tip
-このセクションは Composition API の基本的な知識があることを前提としています。もし Vue を Options API のみで学んできた場合は、(左サイドバーの上部にあるトグルを使って)API 選択を Composition API に設定し、[リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals.html)と[ライフサイクルフック](/guide/essentials/lifecycle.html)の章を読み直すとよいでしょう。
+このセクションは Composition API の基本的な知識があることを前提としています。もし Vue を Options API のみで学んできた場合は、(左サイドバーの上部にあるトグルを使って)API 選択を Composition API に設定し、[リアクティビティーの基礎](/guide/essentials/reactivity-fundamentals)と[ライフサイクルフック](/guide/essentials/lifecycle)の章を読み直すとよいでしょう。
:::
## 「コンポーザブル」とは? {#what-is-a-composable}
@@ -125,7 +125,7 @@ export function useMouse() {
```
:::tip
-`useMouse()` を呼び出すコンポーネントの各インスタンスは、`x` と `y` の状態のコピーを独自に作成するので、互いに干渉することはありません。もしコンポーネント間で共有する状態を管理したい場合は、[状態管理](/guide/scaling-up/state-management.html)の章を読んでください。
+`useMouse()` を呼び出すコンポーネントの各インスタンスは、`x` と `y` の状態のコピーを独自に作成するので、互いに干渉することはありません。もしコンポーネント間で共有する状態を管理したい場合は、[状態管理](/guide/scaling-up/state-management)の章を読んでください。
:::
## 非同期の状態の例 {#async-state-example}
@@ -218,7 +218,7 @@ export function useFetch(url) {
}
```
-このバージョンの `useFetch()` は静的な URL 文字列と、URL 文字列の ref のどちらも受け付けるようになりました。[`isRef()`](/api/reactivity-utilities.html#isref) を使って URL が動的な ref だと判別した場合、[`watchEffect()`](/api/reactivity-core.html#watcheffect) を使ってリアクティブな副作用をセットアップします。この副作用は即時に実行され、URL の ref を依存関係として追跡します。URL の ref が変更されるたび、データをリセットし再度取得します。
+このバージョンの `useFetch()` は静的な URL 文字列と、URL 文字列の ref のどちらも受け付けるようになりました。[`isRef()`](/api/reactivity-utilities#isref) を使って URL が動的な ref だと判別した場合、[`watchEffect()`](/api/reactivity-core#watcheffect) を使ってリアクティブな副作用をセットアップします。この副作用は即時に実行され、URL の ref を依存関係として追跡します。URL の ref が変更されるたび、データをリセットし再度取得します。
これが [`useFetch()` の更新バージョン](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiwgY29tcHV0ZWQgfSBmcm9tICd2dWUnXG5pbXBvcnQgeyB1c2VGZXRjaCB9IGZyb20gJy4vdXNlRmV0Y2guanMnXG5cbmNvbnN0IGJhc2VVcmwgPSAnaHR0cHM6Ly9qc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3RvZG9zLydcbmNvbnN0IGlkID0gcmVmKCcxJylcbmNvbnN0IHVybCA9IGNvbXB1dGVkKCgpID0+IGJhc2VVcmwgKyBpZC52YWx1ZSlcblxuY29uc3QgeyBkYXRhLCBlcnJvciwgcmV0cnkgfSA9IHVzZUZldGNoKHVybClcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIExvYWQgcG9zdCBpZDpcbiAgPGJ1dHRvbiB2LWZvcj1cImkgaW4gNVwiIEBjbGljaz1cImlkID0gaVwiPnt7IGkgfX08L2J1dHRvbj5cblxuXHQ8ZGl2IHYtaWY9XCJlcnJvclwiPlxuICAgIDxwPk9vcHMhIEVycm9yIGVuY291bnRlcmVkOiB7eyBlcnJvci5tZXNzYWdlIH19PC9wPlxuICAgIDxidXR0b24gQGNsaWNrPVwicmV0cnlcIj5SZXRyeTwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiB2LWVsc2UtaWY9XCJkYXRhXCI+RGF0YSBsb2FkZWQ6IDxwcmU+e3sgZGF0YSB9fTwvcHJlPjwvZGl2PlxuICA8ZGl2IHYtZWxzZT5Mb2FkaW5nLi4uPC9kaXY+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0iLCJ1c2VGZXRjaC5qcyI6ImltcG9ydCB7IHJlZiwgaXNSZWYsIHVucmVmLCB3YXRjaEVmZmVjdCB9IGZyb20gJ3Z1ZSdcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZldGNoKHVybCkge1xuICBjb25zdCBkYXRhID0gcmVmKG51bGwpXG4gIGNvbnN0IGVycm9yID0gcmVmKG51bGwpXG5cbiAgYXN5bmMgZnVuY3Rpb24gZG9GZXRjaCgpIHtcbiAgICAvLyByZXNldCBzdGF0ZSBiZWZvcmUgZmV0Y2hpbmcuLlxuICAgIGRhdGEudmFsdWUgPSBudWxsXG4gICAgZXJyb3IudmFsdWUgPSBudWxsXG4gICAgXG4gICAgLy8gcmVzb2x2ZSB0aGUgdXJsIHZhbHVlIHN5bmNocm9ub3VzbHkgc28gaXQncyB0cmFja2VkIGFzIGFcbiAgICAvLyBkZXBlbmRlbmN5IGJ5IHdhdGNoRWZmZWN0KClcbiAgICBjb25zdCB1cmxWYWx1ZSA9IHVucmVmKHVybClcbiAgICBcbiAgICB0cnkge1xuICAgICAgLy8gYXJ0aWZpY2lhbCBkZWxheSAvIHJhbmRvbSBlcnJvclxuICBcdCAgYXdhaXQgdGltZW91dCgpXG4gIFx0ICAvLyB1bnJlZigpIHdpbGwgcmV0dXJuIHRoZSByZWYgdmFsdWUgaWYgaXQncyBhIHJlZlxuXHQgICAgLy8gb3RoZXJ3aXNlIHRoZSB2YWx1ZSB3aWxsIGJlIHJldHVybmVkIGFzLWlzXG4gICAgXHRjb25zdCByZXMgPSBhd2FpdCBmZXRjaCh1cmxWYWx1ZSlcblx0ICAgIGRhdGEudmFsdWUgPSBhd2FpdCByZXMuanNvbigpXG4gICAgfSBjYXRjaCAoZSkge1xuICAgICAgZXJyb3IudmFsdWUgPSBlXG4gICAgfVxuICB9XG5cbiAgaWYgKGlzUmVmKHVybCkpIHtcbiAgICAvLyBzZXR1cCByZWFjdGl2ZSByZS1mZXRjaCBpZiBpbnB1dCBVUkwgaXMgYSByZWZcbiAgICB3YXRjaEVmZmVjdChkb0ZldGNoKVxuICB9IGVsc2Uge1xuICAgIC8vIG90aGVyd2lzZSwganVzdCBmZXRjaCBvbmNlXG4gICAgZG9GZXRjaCgpXG4gIH1cblxuICByZXR1cm4geyBkYXRhLCBlcnJvciwgcmV0cnk6IGRvRmV0Y2ggfVxufVxuXG4vLyBhcnRpZmljaWFsIGRlbGF5XG5mdW5jdGlvbiB0aW1lb3V0KCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKE1hdGgucmFuZG9tKCkgPiAwLjMpIHtcbiAgICAgICAgcmVzb2x2ZSgpXG4gICAgICB9IGVsc2Uge1xuICAgICAgICByZWplY3QobmV3IEVycm9yKCdSYW5kb20gRXJyb3InKSlcbiAgICAgIH1cbiAgICB9LCAzMDApXG4gIH0pXG59In0=)で、デモ用に人工的な遅延とランダムなエラーが発生します。
@@ -230,7 +230,7 @@ export function useFetch(url) {
### 入力引数 {#input-arguments}
-コンポーザブルはリアクティビティーに依存しない場合でも ref の引数を受け取れます。もし他の開発者が使うかも知れないコンポーザブルを書くのなら、入力引数が生の値ではなく ref である場合にも対応するとよいでしょう。[`unref()`](/api/reactivity-utilities.html#unref) ユーティリティー関数はその用途に便利です:
+コンポーザブルはリアクティビティーに依存しない場合でも ref の引数を受け取れます。もし他の開発者が使うかも知れないコンポーザブルを書くのなら、入力引数が生の値ではなく ref である場合にも対応するとよいでしょう。[`unref()`](/api/reactivity-utilities#unref) ユーティリティー関数はその用途に便利です:
```js
import { unref } from 'vue'
@@ -271,7 +271,7 @@ Mouse position is at: {{ mouse.x }}, {{ mouse.y }}
コンポーザブルで副作用(例: DOM イベントリスナーの登録やデータの取得)を起こすことは問題ありませんが、次のルールに注意してください:
-- [サーバーサイドレンダリング](/guide/scaling-up/ssr.html) (SSR) を利用したアプリケーションで作業している場合、DOM 固有の副作用は必ず `onMounted()` のようなマウント後のライフサイクルフック内で実行するようにしてください。これらのフックはブラウザーでしか呼び出されないので、そのコード内では DOM にアクセスできることが保証されます。
+- [サーバーサイドレンダリング](/guide/scaling-up/ssr) (SSR) を利用したアプリケーションで作業している場合、DOM 固有の副作用は必ず `onMounted()` のようなマウント後のライフサイクルフック内で実行するようにしてください。これらのフックはブラウザーでしか呼び出されないので、そのコード内では DOM にアクセスできることが保証されます。
- `onUnmounted()` で副作用をクリーンアップすることを忘れないでください。例えば、コンポーザブルが DOM イベントリスナーを登録したなら、`useMouse()` の例で見てきたように `onUnmounted()` でそのリスナーを削除しないといけません。`useEventListener()` の例のように、自動的にそれをやってくれるコンポーザブルを使うのもよいでしょう。
@@ -333,7 +333,7 @@ export default {
### vs. ミックスイン {#vs-mixins}
-Vue 2 からのユーザーは、[mixins](/api/options-composition.html#mixins) オプションに慣れ親しんでいるかも知れません。これもコンポーネントのロジックを再利用可能なユニットに抽出することができます。ミックスインには 3 つの主要な欠点があります:
+Vue 2 からのユーザーは、[mixins](/api/options-composition#mixins) オプションに慣れ親しんでいるかも知れません。これもコンポーネントのロジックを再利用可能なユニットに抽出することができます。ミックスインには 3 つの主要な欠点があります:
1. **プロパティの発生元が不明確**: 多くのミックスインを使うと、インスタンスのプロパティがどのミックスインから注入されたのが不明確になり、実装を追ったりコンポーネントの動作を理解するのが難しくなります。このことはコンポーザブルに ref + 分割代入のパターンをおすすめする理由でもあり、利用するコンポーネント内でプロパティの発生元が明確になります。
@@ -345,7 +345,7 @@ Vue 2 からのユーザーは、[mixins](/api/options-composition.html#mixins)
### vs. レンダーレスコンポーネント {#vs-renderless-components}
-コンポーネントスロットの章で、スコープ付きスロットに基づく[レンダーレスコンポーネント](/guide/components/slots.html#renderless-components)パターンについて検討しました。またレンダーレスコンポーネントを使って、同じマウストラッキングのデモを実装しました。
+コンポーネントスロットの章で、スコープ付きスロットに基づく[レンダーレスコンポーネント](/guide/components/slots#renderless-components)パターンについて検討しました。またレンダーレスコンポーネントを使って、同じマウストラッキングのデモを実装しました。
レンダーレスコンポーネントに対するコンポーザブルの利点は、余分なコンポーネントインスタンスのオーバーヘッドがないことです。アプリケーション全体に渡って使われる場合、レンダーレスコンポーネントのパターンで余計に作られるコンポーネントインスタンスの量は、顕著なパフォーマンスのオーバーヘッドになりえます。
@@ -357,7 +357,7 @@ Vue 2 からのユーザーは、[mixins](/api/options-composition.html#mixins)
## 参考文献 {#further-reading}
-- [リアクティビティーの探求](/guide/extras/reactivity-in-depth.html): Vue のリアクティビティーシステムがどのように動作をするのかを、より具体的に理解する。
-- [状態管理](/guide/scaling-up/state-management.html): 複数コンポーネントで共有する状態を管理するためのパターン。
-- [コンポーザブルのテスト](/guide/scaling-up/testing.html#testing-composables): コンポーザブルをユニットテストするためのコツ。
+- [リアクティビティーの探求](/guide/extras/reactivity-in-depth): Vue のリアクティビティーシステムがどのように動作をするのかを、より具体的に理解する。
+- [状態管理](/guide/scaling-up/state-management): 複数コンポーネントで共有する状態を管理するためのパターン。
+- [コンポーザブルのテスト](/guide/scaling-up/testing#testing-composables): コンポーザブルをユニットテストするためのコツ。
- [VueUse](https://vueuse.org/): 発展し続ける Vue コンポーザブル集。このソースコードも素晴らしい学習資料です。
diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index aa87c9470..dbeeee6ae 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -12,7 +12,7 @@ const vFocus = {
コアに設定されているデフォルトのディレクティブのセット(`v-model` や `v-show` など)に加え、Vue では独自のカスタムディレクティブを登録することができます。
-Vue におけるコードの再利用として 2 つの方法を紹介してきました:[コンポーネント](/guide/essentials/component-basics.html)と[コンポーザブル](./composables)です。コンポーネントはメインブロックの構築、コンポーザブルはステートフルなロジックの再利用に重点を置いています。一方、カスタムディレクティブは主にプレーンな要素に対する低レベルの DOM アクセスを伴うロジックを再利用することを目的としています。
+Vue におけるコードの再利用として 2 つの方法を紹介してきました:[コンポーネント](/guide/essentials/component-basics)と[コンポーザブル](./composables)です。コンポーネントはメインブロックの構築、コンポーザブルはステートフルなロジックの再利用に重点を置いています。一方、カスタムディレクティブは主にプレーンな要素に対する低レベルの DOM アクセスを伴うロジックを再利用することを目的としています。
カスタムディレクティブは、コンポーネントと同様のライフサイクルフックを含むオブジェクトとして定義されます。フックは、ディレクティブがバインドされている要素を受け取ります。以下は Vue によって要素が DOM に挿入されたときに入力欄にフォーカスするディレクティブの例です:
@@ -210,7 +210,7 @@ app.directive('demo', (el, binding) => {
## コンポーネントでの使い方 {#usage-on-components}
-コンポーネントで使用すると、[フォールスルー属性](/guide/components/attrs.html)と同様にカスタムディレクティブは常にコンポーネントのルートノードに適用されます。
+コンポーネントで使用すると、[フォールスルー属性](/guide/components/attrs)と同様にカスタムディレクティブは常にコンポーネントのルートノードに適用されます。
```vue-html
diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md
index 6b2869de1..18bc3364a 100644
--- a/src/guide/reusability/plugins.md
+++ b/src/guide/reusability/plugins.md
@@ -14,7 +14,7 @@ app.use(myPlugin, {
})
```
-プラグインの定義は `install()` メソッドを公開するオブジェクトか、あるいは単にインストール関数として動作する関数です。インストール関数は[アプリケーションインスタンス](/api/application.html)と、`app.use()` に渡された追加のオプション(もしあれば)を受け取ります:
+プラグインの定義は `install()` メソッドを公開するオブジェクトか、あるいは単にインストール関数として動作する関数です。インストール関数は[アプリケーションインスタンス](/api/application)と、`app.use()` に渡された追加のオプション(もしあれば)を受け取ります:
```js
const myPlugin = {
@@ -26,11 +26,11 @@ const myPlugin = {
厳密に定義されたプラグインの適用範囲はありませんが、プラグインが役立つ一般的なシナリオは以下の通りです:
-1. [`app.component()`](/api/application.html#app-component) や [`app.directive()`](/api/application.html#app-directive) を使って、1 つもしくは複数のグローバルなコンポーネントやカスタムディレクティブを登録する。
+1. [`app.component()`](/api/application#app-component) や [`app.directive()`](/api/application#app-directive) を使って、1 つもしくは複数のグローバルなコンポーネントやカスタムディレクティブを登録する。
-2. [`app.provide()`](/api/application.html#app-provide) を呼び出して、アプリケーション全体でリソースを[注入できる](/guide/components/provide-inject.html)ようにする。
+2. [`app.provide()`](/api/application#app-provide) を呼び出して、アプリケーション全体でリソースを[注入できる](/guide/components/provide-inject)ようにする。
-3. [`app.config.globalProperties`](/api/application.html#app-config-globalproperties) にグローバルなインスタンスプロパティやメソッドを追加する。
+3. [`app.config.globalProperties`](/api/application#app-config-globalproperties) にグローバルなインスタンスプロパティやメソッドを追加する。
4. 上記のいくつかの組み合わせを実行する必要があるライブラリー(例: [vue-router](https://github.com/vuejs/vue-router-next))。
@@ -89,7 +89,7 @@ app.use(i18nPlugin, {
これで、最初の式 `$translate('greetings.hello')` は、実行時に `Bonjour!` に置き換えられます。
-参照: [グローバルなプロパティの拡張](/guide/typescript/options-api.html#augmenting-global-properties)
+参照: [グローバルなプロパティの拡張](/guide/typescript/options-api#augmenting-global-properties)
:::tip
グローバルプロパティはほとんど使わないようにしてください。様々なプラグインから注入された多くのグローバルプロパティがアプリケーション全体で使われていると、すぐに混乱してしまいます。
diff --git a/src/guide/scaling-up/routing.md b/src/guide/scaling-up/routing.md
index 138557620..d1714917e 100644
--- a/src/guide/scaling-up/routing.md
+++ b/src/guide/scaling-up/routing.md
@@ -21,7 +21,7 @@ Vue は SPA の構築に適しています。ほとんどの SPA では、公式
## スクラッチでのシンプルなルーティング {#simple-routing-from-scratch}
-もしシンプルなルーティングのみ必要で、フル機能のルーターライブラリーを含めたくない場合は、[動的コンポーネント](/guide/essentials/component-basics.html#dynamic-components)を使って、ブラウザーの [`hashchange` イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/hashchange_event) を購読したり、 [History API](https://developer.mozilla.org/ja/docs/Web/API/History) を使うことで、現在のコンポーネントの状態を変更することができます。
+もしシンプルなルーティングのみ必要で、フル機能のルーターライブラリーを含めたくない場合は、[動的コンポーネント](/guide/essentials/component-basics#dynamic-components)を使って、ブラウザーの [`hashchange` イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/hashchange_event) を購読したり、 [History API](https://developer.mozilla.org/ja/docs/Web/API/History) を使うことで、現在のコンポーネントの状態を変更することができます。
以下は、最小構成の例です:
diff --git a/src/guide/scaling-up/sfc.md b/src/guide/scaling-up/sfc.md
index 642db6aa5..af16f0bd1 100644
--- a/src/guide/scaling-up/sfc.md
+++ b/src/guide/scaling-up/sfc.md
@@ -65,7 +65,7 @@ SFC にはビルドステップが必要ですが、その代わりに多くの
- [コンポーネントスコープのCSS](/api/sfc-css-features)
- [Composition API を使用する場合のより人間工学的な構文](/api/sfc-script-setup)
- テンプレートとスクリプトを相互分析することによるコンパイル時の最適化の強化
-- テンプレート内の式のオートコンプリートと型チェックによる[IDE のサポート](/guide/scaling-up/tooling.html#ide-support)
+- テンプレート内の式のオートコンプリートと型チェックによる[IDE のサポート](/guide/scaling-up/tooling#ide-support)
- すぐに使用できるホットモジュールリプレイスメント(HMR)のサポート
SFC は、フレームワークとしての Vue を特徴付ける機能であり、次のシナリオで Vue を使用するための推奨されるアプローチです:
@@ -104,4 +104,4 @@ SFC 内の `