我希望当点进路由后,router-view渲染组件可以拿到它想要的数据。不知道是我一开始思路错了还是?我在每个li里面写了router-link,然后还是在当前li中写router-view。之前我记得写demo的时候是可以直接用props拿到的,这次不知道哪里出问题了。下面贴下代码:
补充:
这个lifes是计算属性得到。
<template>
<div class="lifeContent">
<div class="lifeNavBox">
<ul class="lifeNav">
<li v-for="life in lifes ">
<router-link :to="'/lifecontent/' + life.id">
<span class="iconfont forlife" :class="life.text"></span>
<p class="iname">{{ strReplace(life.iname) }}</p>
<p class="ivalue">{{ life.ivalue }}</p>
</router-link>
<router-view :life="life"></router-view>
</li>
<li class="lifeShop">
<span class="iconfont icon-you"></span>
<p>生活指数</p>
<p>精品购</p>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</template>
渲染组件:
<template>
<div class="box">
<div class="nav">
<router-link to="/" class="goHome">
<span class="iconfont icon-fanhui"></span>
{{ life }}
</router-link>
</div>
<div class="details">
<p>{{ life }}</p>
<p>{{ life }}</p>
<div class="fright">
<img src="" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
props: ['life'],
// computed: {
// // lifes() {
// // return this.$store.state.lifes;
// // }
// },
created() {
console.log(this.life);
}
}
</script>
在这里先谢谢各位!
是这样的
props
属性是用来接受父组件传来的值的<router-view :life="life"></router-view>
你这种用法,除非是声明了一个叫router-view
的子组件而
router-view
在这里并不是子组件的关系如果你是想传个值给跳转后的组件,可以用url传参或者用vuex