Vue3中beforeRouteEnter用next方法没有返回$store

根据Vue3文档的介绍，`beforeRouteEnter`守卫中使用`next`方法可以接收一个回调函数，在组件实例化完成后执行。在回调函数中，可以访问到组件实例，并且可以将其作为参数传递给回调函数。

因此，如果想在`beforeRouteEnter`守卫中访问`$store`，可以将其作为参数传递给回调函数，然后在回调函数中访问`$store`。示例代码如下：

beforeRouteEnter(to, from, next) {
  next(vm => {
    console.log(vm.$store)
  })
}

在上面的代码中，`next`方法接收一个回调函数，该回调函数接收一个参数`vm`，表示组件实例。在回调函数中，可以通过`vm.$store`访问到`$store`对象。

另外，如果在组件中需要访问`$store`，也可以通过`inject`和`provide`实现。具体实现方式可以参考Vue3官方文档中的“Provide / Inject”一节。

相关问题

vue中使用beforeRouteEnter解决页面残留问题

在 Vue 中使用 `beforeRouteEnter` 可以在路由进入前执行一些操作，例如解决页面残留问题。

页面残留问题是指在路由跳转时，原来的页面的某些状态或数据仍然存在，导致新页面的数据和页面展示不正确。

使用 `beforeRouteEnter` 可以在路由跳转前清除掉残留状态和数据，确保新页面的数据和展示都是正确的。

具体实现方式如下：

1. 在需要解决页面残留问题的组件中定义 `beforeRouteEnter` 方法。

2. 在 `beforeRouteEnter` 方法中清除残留状态和数据。

beforeRouteEnter (to, from, next) {
  // 清除残留状态和数据
  this.$store.commit('clearState')
  this.$store.dispatch('clearData')
  next()
}

3. `beforeRouteEnter` 方法中的回调函数 `next()` 必须被调用，否则路由将被阻止。

以上就是在 Vue 中使用 `beforeRouteEnter` 解决页面残留问题的方法。

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。