v-if（vue.js、vue-router）を使用してテンプレート内のボタンを処理しますか？

Question

私は顧客のリストを示すVue.jsコンポーネントを持っています。 1つをクリックすると、個々の顧客の編集ビューに切り替わります。これは、データフィールド 'editMode'（trueまたはfalseに設定）をテストしてv-ifを使用して行われます。したがって、テンプレートにはリスティングテーブルと編集フォームがあり、表示されるのは 'editMode'の状態に依存します。ユーザーが顧客をクリックすると、editModeがtrueに変わり（リストが隠れてフォームが表示される）メソッドが呼び出され、保存またはキャンセルすると、editModeを元に戻してフォームを隠すメソッドが呼び出されます。リストを表示します。

システムとしてはうまく動作しますが、後ろのボタンをよりうまく処理する必要があります。現時点では、ユーザーが顧客を編集しているとき、戻るボタンをクリックすると元のリストに戻ることが当然期待されますが、現時点でどのルートに戻っても戻ってこない以前から。しかし、顧客のための編集環境は異なるルートではなく、v-if/v-elseを使用して表示されるテンプレートのちょうど異なる部分です。戻るボタンを希望通りに機能させるにはどうすればよいですか？どうにか私はhistory.pushStateを使用する必要がありますか？私はおそらくユーザーがナビゲーションガードの使用によってどこに行くのかを制御できると知っていますが、これは私にとって間違ったアプローチのようです。

後：Richard Matsenの提案に応じて、私はリファクタリングをあまり必要としない別の方法を考えました。私は間違った方法でこれについて行ってきました。私は、私がそれらを必要とするようにバック（そしてフォワード）ボタンを動作させたいならば、私はいつもルートに関して考えなければならないので、ユーザがリストに戻ることができるようにするには、編集状態彼らはそれを元通りに戻すことができるように、歴史に書き留める。しかし、異なるルートで同じコンポーネントを使用することができます。ユーザーが顧客の行を選択したとき、または顧客の編集を完了したときのコンポーネントメソッドの 'editMode'を直接変更するのではなく、代わりにrouter.pushをパラメータとともに使用して、watch（またはbeforeRouteUpdateナビゲーションガード）パラメータが渡された状態で、ルート変更に対応して「editMode」を返します。このようにして、編集モードへの移行は、同じコンポーネントを使用しているにもかかわらず、ルート変更（ユーザーが元に戻ることができるルート変更）です。私はこれがうまくいくと思う - 私は遊びをするだろう。

Answer 1

私は最近、サブコンポーネント表示をv-ifからchildルートに変更しました（webpack遅延読み込みの目的のために、それは別の話です）。

それは今テンプレートは

<div> 
    <router-view></router-view> 
</div> 

であり、子ルートがサブコンポーネントルートがメソッドから起動されるので、

const routes = [ 
    { 
    path: '/maincomponent', name: 'MainComponent', component: MainComponent, 
    children: [{ path: '/subcomponent', name: 'SubComponent', component: SubComponent }] 
    }, 

ように構成されている

<div> 
    <sub-component v-if="showIt"></sub-component> 
</div> 

にするために使用使用方法：

this.$router.push('subcomponent') 

と

this.$router.push('maincomponent') 

で不活性化私はボタンが戻ってページを取るために働き、およびサブコンポーネントは、V-場合にそれがあったページAに「挿入」されて戻ってブラウザを確認することができます。