基于当前路由更改全局组件的最佳方法是什么？

// main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';
import store from './store';

Vue.use(VueRouter);
Vue.use(Vuex);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({ routes });

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app');

// App.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  computed: {
    title() {
      return this.$store.state.title;
    }
  }
};
</script>

// Home.vue

<template>
  <div>
    <h2>Home</h2>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeTitle() {
      this.$store.commit('setTitle', 'New Title');
    }
  }
};
</script>

// About.vue

<template>
  <div>
    <h2>About</h2>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeTitle() {
      this.$store.commit('setTitle', 'About Title');
    }
  }
};
</script>

// store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    title: 'Default Title'
  },
  mutations: {
    setTitle(state, title) {
      state.title = title;
    }
  }
});

export default store;