Vuejs：路线变更事件

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

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

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

这观察路线的变化，并在更改时设置show为false

如果您使用的是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

以防万一有人在打字稿中寻找操作方法，这是解决方案

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

是的，正如下面@Coops所述，请不要忘记添加

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

编辑： Alcalyn提出了使用Route类型而不是使用任何类型的一个很好的观点

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

上面的响应是更好的方法，但是出于完整性考虑，当您在组件中时，可以使用this。$ router.history访问VueRouter内部的历史对象。这意味着我们可以通过以下方式收听更改：

this.$router.listen((newLocation) =>{console.log(newLocation);})

我认为这与this。$ router.currentRoute.path一起使用时主要有用。 debugger

代码中的说明，然后开始使用Chrome DevTools Console。

具有深层选项的Watcher对我不起作用。

相反，我使用了updated（）生命周期挂钩，该挂钩在每次组件数据更改时都会执行。就像使用mount（）一样使用它。

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

供您参考，请访问文档。

打字稿用户的另一种解决方案：

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 {}