vue2的路由配置文件设置路由title时使用i18n国际化js格式配置的属性切换语言后不能随之变化

在Vue2中，要实现路由切换语言后随之变化的标题，可以使用Vue的自定义指令和i18n插件来实现。

首先，在Vue的路由配置文件中，可以为每个路由设置一个meta字段，用来存储该路由的标题信息。例如：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        title: 'Home' // 设置路由的默认标题
      }
    },
    // 其他路由...
  ]
})

// 在路由切换后，更新页面的标题
router.afterEach((to) => {
  document.title = to.meta.title
})

export default router

接下来，使用i18n插件来实现国际化功能。在Vue的入口文件中，引入i18n插件，并创建一个i18n实例。例如：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'
import router from './router'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages: {
    en: {
      message: {
        title: 'Home' // 英文标题
      }
    },
    zh: {
      message: {
        title: '首页' // 中文标题
      }
    }
  }
})

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

然后，在组件中使用自定义指令来根据语言切换标题。在需要切换标题的组件中，可以使用v-title指令来设置标题。例如：

<template>
  <div>
    <h1 v-title>{{ $t('message.title') }}</h1>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

最后，需要在主页组件中设置标题的语言切换。可以使用watch属性来监听语言切换事件，然后动态更新标题。例如：

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
    <h1 v-title>{{ $t('message.title') }}</h1>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

这样，当切换语言时，页面的标题也会随之变化