关于vue-router跳转子组件无法改变视图的问题
问题展示:
代码展示
// router/index.js
{
path: '/singer',
component: Singer,
children: [
{
path: ':id',
component: SingerDetail,
},
]
},
// father.vue
// html
<div>
<router-view></router-view>
</div>
// js
this.$router.push({
path: `/singer/${id}`
})
解决方法
解决问题的方法不在父组件上,而是在子组件,给子组件加一个绝对定位
// html
<div class='singer-detail'></div>
// css
.singer-detail {
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $color-background;
}