html - vue的<router-view>组件中传递props,报片段实例错误

问题描述

问 题

首先父组件的代码中我是这样写的:

<ul class="subnav">
    <li v-link="{path:'/index/mine/pic'}"  activeClass>照片 ({{user.photos.length}})</li>
    <li v-link="{path:'/index/mine/myfocus'}"  activeClass>关注 ( {{user.focus.length}} )</li>
    <li v-link="{path:'/index/mine/fins'}"  activeClass>粉丝 ( {{user.fins.length}} )</li>
</ul>

<router-view keep-alive :user-prop=user></router-view>

子组件中接收user

module.exports = {
        props:{
            userProp:{
                type:Object
            }
        }
    }

想了想,是不是多个页面对应一个routeView 不知道数据该传给谁?然后就会出错.

就改成了这样为每个页面单独传值.

<router-view keep-alive :user-pic="user.photo" :user-focus="user.focus" :user-fins="user.fins"></router-view>

子页面分别接收不同的值

        props:{
            userPic:{
                type:Object
            }
        }

结果: 还是会报一样的错误.
现在没有解决暂时用的是把数据放在localStorage里面,但是可以少发一次请求会更好. 求大大们解答

解决方案

页面子组件请用div括起来

这篇关于html - vue的<router-view>组件中传递props,报片段实例错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！