vue的router-view如何传递props

Question

vue-router的文档中指出，router-view是可以传递props的。但是在实际使用的时候，子组件总是会报Invalid prop ... got Undefined.

<!-- Parent.vue -->
<template>
    <router-view :room="room"></router-view>
</template>
<script>
    export default {
        data() {
            return {
                room: {
                    info: []
                }
            }
        }
    }
</script>

<!-- Child.vue -->
<template>
    <div v-for="k of room.info"></div>
</template>
<script>
    export default {
        data() {
            return {}
        },
        props: {
            room: {
                type: Object,
                default() {
                    return {}
                }
            }
        }
    }
</script>

查阅了别人的问题都说用Vuex，那么文档中所说的『You can pass props to it.』具体应该怎样做？

Answer 1

修正：

OK，既然我们已经知道你之前的问题只是手误，那就往下走(之前的回复都可以作废)。

你说你做了多级路由，所以问题就在这了，从最外层的<router-view>设置props，想在下面的某一级sub-router接收，那麻烦点，你得在中间路过的每一级都把props透传下去，直至你最里层的那个组件。

我做了一个三级的jsfiddle，最外层放:room，中间透传，三层组件Bar接收。

估计这次可以解决你问题了

Answer 2

最近也遇到这个 在router-view 传参数 在props里面去接收 ,看了楼上大哥的回答 还是没懂..