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

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

在组件警卫

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

import {useRouter} from vue-router;

useRouter();

路由器。afterEach((to, from) => {});

在组件的$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