vue-router で ElementUI を使用してナビゲーションを実装する方法

以下に、ElementUI で vue-router を使用してナビゲーションを実装する例を紹介します。これは参考になるので、皆さんのお役に立てれば幸いです。

ルーティングはすべてのプロジェクトで不可欠です。最近、vue-router と ElementUI を使用してナビゲーション バーを実装することを学びました。学習プロセス中に問題が発生しました。ブラウザで更新をクリックした後、ページが元の位置に留まりました。ナビゲーションはデフォルトで最初のものです。

私は長い間フロントエンドに触れていないので、ルーティングの概念がよくわかりませんが、ドキュメントに従って書いた後、どうやって始めればよいのかわかりません。同僚にアドバイスを求めました。同僚の解決策は vuex 管理を使用することですが、私はまだ vuex に慣れていないため、この問題は保留になっていましたが、今週末自宅で勉強していて偶然 $route.path を使用できることに気づきました。デフォルトの選択されたナビゲーションを設定しますが、更新するとページは元の位置に留まり、選択した後、長い間情報を確認しましたが、効果はありませんでした。答えは見つかりませんでした。後でインターネット上の例と比較したところ、次のように

default-active="$route.path"

の前にバインディング シンボルを追加する必要があることがわかりました。

:default-active="$route.path"

このように設定した後、ナビゲーションとページも同時に変更できます。

完全なナビゲーション コードについては、こちらをご覧ください:

上記は、私が皆さんのためにまとめたものであり、将来皆さんのお役に立てれば幸いです。

関連記事:

vue.jsでのthis.$emitの使い方を詳しく解説

vueでパスワードの表示非表示切り替え機能を実装する方法

親コンポーネントを使った使い方Vue イベントで子コンポーネントを呼び出す

以上がvue-router で ElementUI を使用してナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。