在组件中的$route上设置一个监视器，如下所示：

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

这将观察路由更改，并在更改时将show设置为false

如果您使用的是v2.2.0，则还有一个选项可用于检测$routes中的更改。
要对同一组件中的参数更改做出React，可以观察$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

如果有人想知道如何在Typescript中执行此操作，请参考以下解决方案：

@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';

有深度选项的观察者对我不起作用。
相反，我使用了**updated（）**生命周期钩子，它在每次组件数据更改时执行。

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

请访问文档以供参考。

更新

正如@CHANist所述，router.listen不再工作，我不知道它从哪个版本停止工作，但好消息是（正如@CHANist所述）我们可以用途：

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

旧响应

上面的响应更好，但只是为了完整性，当您在组件中时，您可以使用以下命令访问VueRouter中的历史对象：this.$router. history。这意味着我们可以使用以下命令监听更改：

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

我认为这主要是有用的，当使用与此。$router.currentRoute.path你可以检查我说的放置一个debugger
指令并开始使用Chrome DevTools控制台。

从“vue-router”导入{ useRouter };
如果您的路由器是空的，请使用
（（到，从）=〉{ }）;

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

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

使用Vue Router是一种替代方法，请在组件中使用beforeRouteLeaveafter方法，如下所示：

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

根据VueJ的文档，它被称为Navigation Guards检查下面的链接：
导航防护装置
leave guard通常用于防止用户意外地离开未保存编辑的路径。
组件内防护装置：
输入路线前
路由更新前
在路由离开之前

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

查看以下链接以获取更多信息：
组件内防护装置

使用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