Vue 2にrouter-linkに登録されているイベントの無効な解決方法

1100 ワード

今日vueでtabバーを切り替えたとき、router-linkにバインドされているclickがトリガーされないことに偶然気づきました.その後、テストでは、router-linkにバインドされているすべてのイベントがその後公式のドキュメントを表示することを促さないことがわかりました.明確な説明はありません.
コードは次のとおりです.
   {{item.text}}

今、methodsでどのように定義してもchange関数はトリガーされないことに気づきました.これはなぜですか.githubでvue-routerのコードを見たところ、画像が見つかりました.
イベントがブロックされました
現在のrouter-linkのtagがaでない場合(公式ドキュメントではaがデフォルトであり、tagでレンダリングされたラベルを変更できる)は、自分のサブエレメント(コンポーネント)を探し、最初に見つけた属性と時間を上書きします.だからこの時事件は阻止された.個人的な見方:router-linkの役割は単純なルーティングジャンプであり、イベントを阻止しなければ穴がたくさんあるかもしれないので、著者はいっそ他のイベントのトリガを阻止した.
解決方法
    {{item.text}}

@clickの後にnativeを付けるだけでいいです
オリジナルイベント
nativeイベント修飾子を追加すると元のイベントになります
$element.addEventListener(click, callback);

このときaラベルはブロックされず、router-linkにバインドされたイベントがトリガーされない問題を解決できます.次に、tab切替を実現するためにclassを追加するには、routerに次の構成を追加します.
export default new Router({
  routes: [],//       
  linkActiveClass:'active' //           active                
})