在 VueJS 中使用 $router.push() 在路径之间传递数据

Question

我对 VueJS 有点陌生，我试图在用户通过身份验证后将用户角色从登录路径传递到主页，然后我可以确定用户可以使用 v-if 看到哪些链接. 下面是我的 login.vue 代码：

this.$axios({
                      method: 'post',
                      url: 'api/role',
                      data: {
                        'email': this.username
                      },
                      headers: {'Authorization': 'Bearer '+ this.$tokens.getToken()}
                    })
                    .then(response => {
                        this.role = response.data['role'];
                        
                    })
    				this.$router.push('/');
    			})
    			.catch(function(error){
    				console.log(error);
    			})

如何将“this.role”值传递给路径“/”以便从那里访问它？

Answer 1

您可以使用查询来传递角色。

所以添加一个查询，您可以在其中以编程方式将用户导航到主页：

this.$router.push({path:'/', query:{role: this.role}});

然后在您的主页组件中，您可以检索您的功能的路由查询

例如：

//homme page component

created(){
  if(this.$route.query.role === 'admmin){
    //this is admin
  }
}