Vue 将参数从A页面带到 B页面

最新推荐文章于 2024-03-17 16:56:34 发布

蒂法洛克

最新推荐文章于 2024-03-17 16:56:34 发布

阅读量744

点赞数

文章标签： javascript

没所谓啦。做人嘛，开心最重要啦！

本文链接：https://blog.csdn.net/inflarunas/article/details/105663727

版权

场景：后台登陆后，获得用户信息，将此用户信息传递到下个页面

登陆：

formModule
.axios({
    method: "post",
    url: "http://127.0.0.1:3001/admin-center/adminUser/login",
    data: {
        name: formModule.form.name,
        password: formModule.form.password
    }
})
.then(function (response){
    formModule.$message({
        message: response.data.code,
        type: 'success'
    });

    // 向下个页面传递参数
    formModule.$router.push({
        path: "/home",
        query:{
            userDetail:response
        }
    });
})
.catch(function (response){
    alert(response.data.message)
})

目标页面

export default {
    name:"Home",
    data() {
      return {
        userDetail:{}
      }
    },
    created(){
        // 获取登陆页面返回的用户信息，用于当前页面个人信息展示
        this.getUserDetail();
    },
    methods:{
        getUserDetail(){
            // 获取路由带过来的参数
            const routerParams = this.$route.query.userDetail
            // 将数据放在当前组件的数据内
            this.userDetail = routerParams.data.data;
        }
    },
    watch:{
        '$route': 'getUserDetail'
    }
}