web-dev-qa-db-ja.com

<router-view：key = "$ route.fullPath">とは何ですか？

私はVue.jsを初めて使用しますが、ルーターが次のような動作をする方法について少し理解していると思います。

<router-link to="/">

しかし、私は次の行が何をするのか本当に理解していません：

<router-view :key="$route.fullPath"></router-view>

ルータービューだけでコンテンツが確実に表示されると思いますが、重要な部分はどういう意味ですか？

javascripthtmlvue.jsvue-router
10
Jordan

特殊属性-キー を参照してください

また、要素/コンポーネントを再利用する代わりに強制的に置換するためにも使用できます。これは、次の場合に役立ちます。

  • コンポーネントのライフサイクルフックを適切にトリガーする
  • トリガー遷移

$route.fullPath は次のように定義されます

クエリとハッシュを含む完全に解決されたURL。

keyを$route.fullPathにバインドすると、ナビゲーションのたびに<router-view>要素/コンポーネントの「置換を強制する」イベントが発生します。

前述のように、これはほとんどの場合、トランジション/アニメーションをトリガーするために行われます。

15
Phil