ant-design-vueページのナビゲーションバーを更新して、ホームページの問題を自動的に特定します

 問題：Vue-routerがvueプロジェクトで使用されている場合、ページが更新され、ブラウザーが前後に移動すると、ナビゲーションメニューのホームページが強調表示されます。

ナビゲーションバーの[ヘルプ]をクリックすると、[ヘルプ]が強調表示され、ページを更新すると、[ホーム]が強調表示されます。ブラウザが前後に移動するたびに、ナビゲーションバーも自動的にホームページに配置されます。

 問題のあるコード：

<a-menu 
    theme="light"
    mode="horizontal"
    :defaultSelectedKeys="['1']"
>
    <a-menu-item key="1"><router-link to="/">Home</router-link></a-menu-item>
    <a-menu-item key="2"><router-link to="/search">Search</router-link></a-menu-item>
    <a-menu-item key="3"><router-link to="/help">Help</router-link></a-menu-item>
    <a-menu-item key="4"><router-link to="/contact">Contact</router-link></a-menu-item>
</a-menu>

 解決： 

メニューナビゲーションメニューのAPIに関するant-design-vueドキュメントを確認してください

メニューコンポーネントの2つの属性に注意してください：selectedKeys、defaultSelectedKeys
selectedKeys：現在選択されているメニュー項目キー配列
defaultSelectedKeys：最初に選択されたメニュー項目キー配列。
これら2つの属性は同時に使用されます。同時に使用される場合は、次のdefaultSelectedKeysようになります。無効になりますselectedKeys。

最初に選択したメニュー項目を指定するだけの場合は、それを使用してくださいdefaultSelectedKeys。
メニューコンポーネントの選択した項目を毎回異なる小道具を渡して変更する必要がある場合は、それを使用してくださいselectedKeys。

そこで、selectedKeys传入this。$ route.pathプロパティを使用して問題を解決しました。

最終コード：

<a-menu
    theme="light"
    mode="horizontal"
    :selectedKeys="[this.$route.path]"
>
    <a-menu-item key="/"><router-link to="/">Home</router-link></a-menu-item>
    <a-menu-item key="/search"><router-link to="/search">Search</router-link></a-menu-item>item>
    <a-menu-item key="/help"><router-link to="/help">Help</router-link></a-menu-item>
    <a-menu-item key="/contact"><router-link to="/contact">Contact</router-link></a-menu-item>
</a-menu>