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

使用Vue3和合成API你可以做到

<script setup lang="ts">
import { watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

// do a `console.log(route)` to see route attributes (fullPath, hash, params, path...)
watch(
  () => route.fullPath,
  async () => {
    console.log("route fullPath updated", route.fullPath);
  }
);
</script>

参考资料和示例:https://router.vuejs.org/guide/advanced/composition-api.html#vue-router-and-the-composition-api

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

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

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

请参阅文档以供参考。

更新

如@CHANist所述，路由器。listen不再工作，我不知道从哪个版本开始停止工作，但好消息是(@CHANist也说过)我们可以使用:

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

旧的响应

上面的响应是更好的，但只是为了完整性，当你在一个组件中，你可以访问VueRouter内部的历史对象: router.history美元。 这意味着我们可以通过:

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

我认为这个函数在和。$router.currentRoute.path一起使用时非常有用 您可以检查我所说的关于放置调试器的内容

指令在你的代码，并开始玩Chrome DevTools控制台。

如果有人正在寻找如何在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';