複数の Vue ルートが 1 ページを共有する問題を解決する

以下に、複数の Vue ルートが 1 つのページを共有する問題を解決する記事を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

毎日の Vue 開発では、特にルートが動的に追加される場合に、ページを共有するために複数のルートが必要になることがあります。異なるデータのみが表示され、他には何も変更されません。例:

let routes = [
  {path:"/zhanshan",
  components:Person,
  },
  {path:"/lisi",
  components:Person,
  },
  {path:"/wangwu",
  components:Person,
  }
]

この場合、ページは初めて正常に読み込まれた後、再度読み込まれないことがわかりました。したがって、ページには常に初めて読み込まれたデータが表示され、ルーティングが有効になっていないような印象を与えますが、ブラウザのアドレス バーの変化を観察することで、これがルーティングとは何の関係もないことが確認できます。これは、Vue を使い始めたばかりの学生にとっては非常に便利です。実際、これはページの宣言サイクルに関連しているためです。計算済み...) ページが読み込まれた後は再び開始されないため、その結果、ページにはジャンプがないように見えます。

実際、この種のビジネス要件は、ページを切り替える必要がなく、ページ内のルーティング アドレスの変更を監視するだけで済みます。アドレスが変わったのでデータをリロードしましょう。

watch:{
 "$route":function(to,from){
   //from 对象中包含当前地址
   //to 对象中包含目标地址
   //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
 }
}

上記の関数は、ルートが変更されるたびにトリガーされ、この関数でページデータをリロードできます。ページ構成が大幅に変更される場合は、別途新規ページを作成することをお勧めします。

上記は私があなたのためにまとめたものです。

関連記事:

JSでEL式を使ってコンテキストパラメータの値を取得する方法

JSで左のリストを右のリストに移動する機能を実現する

でのEL式の使用jsと空でない判定メソッド

以上が複数の Vue ルートが 1 ページを共有する問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。