如何使用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？

回答

相关问题