Vue中如何使用路由实现国际化的多语言切换？

npm install vue-router

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [  {    path: '/',    name: 'Home',    component: () => import('@/views/Home.vue')  },  // 其他路由配置...]const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes})export default router

// en.jsexport default {  home: 'Home',  about: 'About',  contact: 'Contact'}// zh.jsexport default {  home: '首页',  about: '关于我们',  contact: '联系我们'}

<template>  <div>    <nav>      <router-link :to="{ name: 'Home' }">{{ $t('home') }}</router-link>      <router-link :to="{ name: 'About' }">{{ $t('about') }}</router-link>      <router-link :to="{ name: 'Contact' }">{{ $t('contact') }}</router-link>    </nav>    <router-view></router-view>  </div></template><script>export default {  name: 'App',  methods: {    $t(key) {      const lang = this.$router.currentRoute.meta.lang      return this.$options.lang[lang][key] || ''    }  },  metaInfo() {    return {      lang: 'en'    }  }}</script>

// 在router/index.js中的router配置中添加router.beforeEach((to, from, next) => {  const lang = to.query.lang || 'en'  // 设置当前路由的meta信息，在组件中可以通过this.$router.currentRoute.meta.lang获取  to.meta.lang = lang  next()})