Question

我想在渲染组件之前在vuejs中获取数据。因此，这就是我无法使用beforeRouteEnter获取数据的问题。

这是一个使用created的有效示例：

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

有了这个，在RouteEnter之前我得到了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);
    });
};

Answer 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

注意：：由于afterEach不是“组件内防护”，因此如果您将最后一个文件单独存放，则需要将商店导入到router.js文件中文件夹

Vuejs beforeRouteEnter不接收数据。未定义

1 个答案: