如何使用Vue.js中的後退按鈕處理v-if？

我正在使用Vue.js進行路由，並試圖使用v-if來進行條件顯示2 div。第一個div是項目列表。第二個div是一個項目的細節。我試圖做的一個很好的例子就是類似於Gmail。你有你的電子郵件列表，當你點擊主題時，你會被帶到一個顯示整個電子郵件的頁面。如何使用Vue.js中的後退按鈕處理v-if？

我有這個有點工作使用v-if。在我的數據中，我有一個名爲view的變量。當頁面加載時，這個值被設置爲'list'，它顯示列表div。當某人點擊列表div中的某個內容時，該值將切換爲「詳細信息」。和細節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"; 
       }

來源

2017-01-05 Dave

我覺得這裏的方法不太好，因爲你使用的是vue路由器，應該創建2個組件 - 第1個組件將處理項目列表，第2個組件將處理單個項目信息。當您在路由器配置中初始化路由時，您將爲特定路徑附加這些組件，並在需要時爲其提供名稱選項。 –

試試這個：

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

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

，然後添加兩條路線：

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

是Emails組件後應如何處理顯示所有郵件的邏輯和EmailShow應該處理只顯示一個電子郵件

來源

2017-01-05 18:32:00 DokiCRO

如何使用Vue.js中的後退按鈕處理v-if？

回答

相關問題