使用v-if（vue.js、vue路由器）处理模板中的“后退”按钮？

我有一个Vue.js组件，它显示客户列表。当用户单击其中一个时，它会切换到单个客户的编辑视图。这是使用v-if测试数据字段“editMode”（设置为true或false）完成的。因此，模板有一个列表和一个编辑表单，显示的内容取决于“editMode”的状态。当用户单击客户时，将调用一个方法，该方法将editMode切换为true（从而隐藏列表并显示表单）；当用户保存或取消时，将调用一个方法，将editMode切换回true，从而隐藏表单并显示列表

它作为一个系统工作正常，但我需要更好地处理后退按钮。此时，当用户编辑客户时，他们自然会期望单击“后退”按钮会将他们带回到他们来自的列表，但事实并非如此，此时它会将他们带回到他们以前来自的任何路线。但是客户的编辑环境不是一个不同的路径，它只是模板的一个不同部分，使用v-if/v-else显示。如何使后退按钮按要求工作？我需要使用history.pushState吗？我知道我可能可以通过使用导航卫士来控制用户去哪里，但这对我来说似乎是错误的方法

---

后来：为了回应Richard Matsen下面的建议，我想到了另一种不需要太多重构的方法。我一直走错了方向。我应该始终考虑路线，如果我希望后退（和前进）按钮按我所希望的方式工作，那么如果我希望用户能够返回列表，我必须将编辑状态推到历史上，以便他们可以退出。但是不同的路由可以使用相同的组件。当用户选择客户行或完成客户编辑时，我不应直接更改组件方法中的“editMode”，而应使用带有参数的router.push，并使用手表（或beforeRouteUpdate导航卫士）设置“editMode”，以响应路由更改，并传递参数。这样，移动到编辑模式就是路由更改（用户可以从中返回），即使它使用的是相同的组件。我想这应该行得通——我会玩一个游戏。

我最近将一个子组件显示从v-if更改为子路由（用于网页包延迟加载，但那是另一回事）

过去是这样

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

子组件路由通过使用的方法激活

this.$router.push('subcomponent')

并用

this.$router.push('maincomponent')

---

我可以确认browser back（浏览器后退）按钮可以使页面后退，并且子组件“插入”到页面a中，就像v-if一样。

啊，这很有趣！我从来没有真正看过路由器视图，除了在我的顶级App.vue中——我从来没有考虑过嵌套它。这看起来是一个很好的方法。我也不是，我试图分解网页块，要做到这一点，你需要取消引用子组件和子路由。我编辑了我的问题，添加了一种受Richard Matsen上述建议启发的方法。

this.$router.push('subcomponent')

this.$router.push('maincomponent')