vue beforeRouteEnter里取不到i18n

在Vue.js中，`beforeRouteEnter`钩子是在组件被渲染到目标路由之前被调用的，通常用于初始化数据或设置一些状态。然而，如果你在这个钩子里尝试访问i18n（国际化）插件，可能会遇到问题，因为此时组件还没有挂载并且Vue实例可能尚未完成初始化。

在`beforeRouteEnter`钩子中，你可以获取到导航的目标路由信息，但是直接操作i18n对象可能会有问题。为了避免这种情况，可以这样做：

1. 将i18n对象作为props传给组件：

// 在父组件的路由配置中
export default {
  //...
  components: { YourComponent },
  props: ['i18n']
}

// 然后在组件接收这个prop
export default {
  props: ['i18n'],
  methods: {
    async beforeRouteEnter(to, from, next) {
      const i18n = this.$props.i18n;
      // 在这里使用i18n
      next(vm => {
        vm.initData();
      });
    }
  }
}

2. 使用vue-i18n提供的异步加载机制：

async function beforeRouteEnter(to, from, next) {
  await this.$store.dispatch('loadLanguage');
  next(() => {
    // 在这里您可以安全地使用i18n了
  });
}

这样可以确保在组件渲染并有完整的Vue实例时再处理i18n。