Vuejs beforeRouteEnter 未接收数据。不明确的答案

【问题标题】：Vuejs beforeRouteEnter not receiving data. UndefinedVuejs beforeRouteEnter 未接收数据。不明确的
【发布时间】：2019-07-29 20:29:30
【问题描述】：

我想在渲染组件之前在 vuejs 中获取数据。所以这是我没有使用 beforeRouteEnter 获取数据的问题。

这是created 的工作示例：

created() {
    this.$store.dispatch('getInvite');
    this.$store.dispatch('getInviteUser');
},
computed: mapState([
    'user',
    'invite',
    'invite_user'
]),

有了这个 beforeRouteEnter 我得到localhost:8080/invitation/undefined

 beforeRouteEnter(to, from, next) {
     store.dispatch('getInvite');
    next();
},

这是actions.js中的函数

const getInvite = ({
  commit
}) => {
  API.get('/invitation/' + router.currentRoute.params.slug + '/' + router.currentRoute.params.id)
    .then((response) => {
      if (response.status === 200 && response.data.invite && response.data.user) {
        return commit('SET_INVITE', response.data.invite);
      } else {
        return router.push({
          name: 'home'
        });
      }
    }).catch((error) => {
      return console.log(error);
    });
};

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

根据文档：

beforeRouteEnter 守卫无权访问这个，因为守卫在导航确认之前被调用，因此新的进入组件甚至还没有创建。

所以router 仍然是未定义的，因为它是实例的插件：

您可以使用afterEach 创建实例并导航新路由：

在您的router 文件中：

router.afterEach((to,from)=>{
     if (to == 'component') {
        store.dispatch('getInvite')
      }
    })
  // you don't have to use the if in case you want an API call after every navigation

NB : 因为afterEach 不是“组件内保护”，如果您在自己的文件夹中分离了最后一个，则需要将您的商店导入router.js 文件

【讨论】：

这在奇怪的行为中起作用。如果我从一个邀请转到另一个邀请，我会看到第一个邀请的信息，直到我重新访问最后一个邀请。
@zlotte 是的，因为 to 路线尚未导航，但我们仍然是 o，beforeRouteLeave ...它仍然在您之前的路线上...如果您不这样做一定需要beforeRoute，你可以使用afterEach，就像我说的那样......所以目的地路由器被导航......这应该是你问题的解决方案，所以我会用它来更新答案。
我需要把这个放在 router.js 中吗？
好的。我没有router。我的router.js 文件中有export default new Router。我做一个实例吗？
@zlotte 好的然后把它放在你的导入下import router from ''/router.js'