Vue.jsの戻るボタンでv-ifを処理する方法は？

Question

Vue.jsでルーティングを使用していて、v-ifを使用して2つのdivを条件付きで表示しようとしています。最初のdivはアイテムのリストです。 2番目のdivはアイテムの詳細です。私がしようとしていることの良い例は、Gmailに似たものでしょう。電子メールのリストがあり、件名をクリックすると、電子メール全体を表示するページに移動します。

これは、v-ifを使用してこれをやや使いました。私のデータには、ビューと呼ばれる変数があります。ページが読み込まれると、この値は 'list'に設定され、リストdivが表示されます。誰かがリストdiv内の何かをクリックすると、この値は 'details'に切り替わります。詳細のdivが表示されます。

私が遭遇している問題は、ユーザーがブラウザの戻るボタンを押すと、ビュー変数が更新されないということです。これは一般的なシナリオのようですので、これを行うより良い方法があるかどうか疑問に思っています。

<div id="app"> 
    {{ view }} //for debugging 

    <div class="list" v-if="view === 'list'"> 
    <table> 
     <tr v-for="item in list"> 
      <td><router-link v-on:click.native="doSomething" v-bind:to="'/items/' + item.id">{{ item.title }}</router-link></td> 
     </tr> 
    </table> 
    </div> 
    <div class="details" v-if="view === 'details'"> 
     <router-view></router-view> 
    </div> 
</div> 

スニペットから私のVue宣言。

  data: { 
       view : "list" 
      }, 

      doSomething: function() { 
        var app = this; 
        app.view = "details"; 
       } 

Answer 1

このお試しください：

<div id="app"> 
    {{ view }} //for debugging 

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

をそして二つの経路を追加します。そのEmailsコンポーネントはすべてのメールを表示するロジックを処理する必要がありますし、EmailShowはただ1つの電子メールを示す処理する必要があります後

{ 
    path: '/', 
    name: 'emails', 
    component: Emails, 
}, 
{ 
    path: '/login', 
    name: 'email.show', 
    component: EmailShow, 
} 

を