import {useRouter} from vue-router;

useRouter();

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

你可以使用beforeEach事件，它允许任何函数在路由改变时发生，只是不要忘记调用next()函数来进行下一个操作，基本上它与后端expressJS中间件具有相同的工作。

router.beforeEach((to, from, next) => {
  store.commit('setError', null); //in this example on each route I'm removing the error noted from the old route
  document.title = `${to.meta.title} | HartWork`; //on each route I'm adding a prefix to document title.
  next(); //calling next to proceed next functions and operations
})

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

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

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

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

import {useRouter} from vue-router;

useRouter();

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

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