如何使用 Vue.js 中的后退按钮处理 v-if？答案

【问题标题】：How to handle v-if with the back button in Vue.js?如何使用 Vue.js 中的后退按钮处理 v-if？
【发布时间】：2017-05-20 09:42:23
【问题描述】：

我在 Vue.js 中使用路由，并尝试使用 v-if 有条件地显示 2 个 div。第一个 div 是项目列表。第二个 div 是项目的详细信息。我正在尝试做的一个很好的例子就是类似于 Gmail。你有你的电子邮件列表，当你点击主题时，你会被带到一个显示整个电子邮件的页面。

我使用 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"; 
                }

【问题讨论】：

我认为这里的方法不好。由于您使用的是 vue 路由器，您应该创建 2 个组件 - 第一个组件将处理项目列表，第二个组件将处理单个项目信息。当您在路由器配置中初始化路由，您将为特定路径附加这些组件，并在需要时为它们提供名称选项。

标签： javascript vue.js

【解决方案1】：

试试这个：

<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 应该只处理显示一封电子邮件

【讨论】：