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


当前回答

typescript用户的另一个解决方案:

import Vue from "vue";
import Component from "vue-class-component";

@Component({
  beforeRouteLeave(to, from, next) {
    // incase if you want to access `this`
    // const self = this as any;
    next();
  }
})

export default class ComponentName extends Vue {}

其他回答

在组件的$route上设置一个监控器,如下所示:

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

它观察路由变化,当路由变化时,将show设置为false

有深度选项的观察者对我没用。

相反,我使用updated()生命周期钩子,每当组件的数据发生变化时执行该钩子。 就像使用mounted()一样使用它。

mounted() {
   /* to be executed when mounted */
},
updated() {
   console.log(this.$route)
}

请参阅文档以供参考。

如果有人正在寻找如何在Typescript中做到这一点,这里是解决方案:

@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: Route) {
    // Some action
}

是的,正如下面@Coops提到的,请不要忘记包括:

import { Watch } from 'vue-property-decorator';

编辑: Alcalyn提出了一个很好的观点,使用Route type而不是any:

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

使用Vue路由器是另一种方法,在你的组件中使用beforeRouteLeave after方法,如下所示:

<template>
   <button @click="ShowMethod">DisplayButton</button>
</template>
<script>
  data() {
    return { show: true };
   },
   methods: {
   ShowMethod() {
   this.show = false;
    }
   },
   beforeRouteLeave(to, from, next) {
   this.show = false;
   next();
 }
</script>

根据VueJs的文档,它被称为导航警卫,检查下面的链接:

导航警卫

左护常用于防止使用者意外 留下未保存编辑的路由。可以取消导航 通过调用

在组件警卫:

beforeRouteEnter beforeRouteUpdate beforeRouteLeave

  beforeRouteLeave(to, from, next) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
 }

查看下面的链接了解更多信息:

在组件警卫

如果您正在使用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