Vuejs：路由更改事件

Question

在我的主页上，我有下拉菜单显示 v-show=show 通过单击链接 @click = "show=!show" 我想在更改路线时设置 show=false 。请告诉我如何实现这件事。

原文由 kipris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的组件中的 $route 上设置一个 观察者，如下所示：

 watch:{
    $route (to, from){
        this.show = false;
    }
}

这会观察路线变化，并在变化时将 show 设置为 false

原文由 Vamsi Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用的是 v2.2.0，那么还有一个选项可用于检测 $routes 的变化。

要对同一组件中的参数更改做出反应，您可以查看 $route 对象：

 const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

或者，使用 2.2 中引入的 beforeRouteUpdate 守卫：

 const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

参考： https ://router.vuejs.org/en/essentials/dynamic-matching.html

原文由 Shubham Nigam 发布，翻译遵循 CC BY-SA 4.0 许可协议