如何在更改路由时调用构造函数？

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 构造函数中订阅路由变化事件
    this.unlisten = props.history.listen((location, action) => {
      // 在路由变化时执行操作
      console.log('路由已更改');
    });
  }

  componentDidMount() {
    // 组件挂载后执行的操作
  }

  componentWillUnmount() {
    // 组件卸载前执行的操作
    // 取消订阅路由变化事件
    this.unlisten();
  }

  render() {
    return (
      // 组件的渲染内容
    );
  }
}

export default withRouter(MyComponent);

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});

router.beforeEach((to, from, next) => {
  // 在路由变化前执行的操作
  console.log('路由将要更改');
  next();
});

new Vue({
  router,
  // 根组件的渲染内容
}).$mount('#app');