vue.js - 使用 v-if (vue.js、vue-router)处理模板中的后退按钮？

Question

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

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

后来:为了回应下面 Richard Matsen 的建议，我想到了另一种不需要太多重构的方法。我一直以错误的方式处理这件事。我应该始终考虑路线，如果我希望后退(和前进)按钮按我想要的方式工作，所以如果我希望用户能够返回到列表，我必须插入编辑状态回顾历史，这样他们就可以退出。但不同的路由可以使用相同的组件。当用户选择客户行或完成客户编辑时，我不应该直接更改组件方法中的“editMode”，而是应该使用带有参数的 router.push ，并使用一个监视(或 beforeRouteUpdate 导航守卫)来设置 ' editMode' 响应路由变化，并传递参数。这样，即使使用相同的组件，移动到编辑模式也是一次路由更改(用户可以从中返回)。我认为这应该可行 - 我会玩一玩。

Answer 1

我最近将子组件显示从 v-if 更改为子路由(出于 webpack 延迟加载的目的，但那是另一个故事了)。

以前是

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

现在模板是

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

子路由的配置如下

const routes = [
  { 
    path: '/maincomponent', name: 'MainComponent', component: MainComponent,
    children: [{ path: '/subcomponent', name: 'SubComponent', component: SubComponent }] 
  },

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

this.$router.push('subcomponent')

并停用

this.$router.push('maincomponent')

我可以确认浏览器后退按钮可以返回页面，并且子组件已通过 v-if“插入”到页面中。