Question

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

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

后来：在回答Richard Matsen的建议时，我已经想到了另一种方法，它不需要那么多的重构。我一直在以错误的方式解决这个问题。我应该总是考虑路线，如果我想让后退（和前进）按钮按我的意愿工作，那么如果我希望用户能够返回列表，我必须推动编辑状态关于历史，所以他们可以退出它。但是不同的路线可以使用相同的组件。而不是直接改变＆＃39; editMode＆＃39;在用户选择客户行或完成客户编辑的组件方法中，我应该使用带参数的router.push，并设置一个设置＆＃edit;编辑模式的监视器（或之前的路径保护）。响应路由更改，传递参数。这样，转向编辑模式就是路由更改（用户可以返回），即使它使用相同的组件。我认为这应该有用 - 我会玩。

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')

我可以确认浏览器后退按钮的工作方式是将页面取回，并且子组件已插入＆＃39;使用v-if进入页面。

使用v-if（vue.js，vue-router）处理模板中的后退按钮？

1 个答案: