时间戳

首页 > 解决方案 > Vuejs beforeRouteEnter 没有收到数据。不明确的

vue.js - Vuejs beforeRouteEnter 没有收到数据。不明确的

问题描述

我想在渲染组件之前在 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.jsvue-router

解决方案

根据文档：

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

推荐阅读