关于vue-router跳转子组件无法改变视图的问题

关于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;
}

效果展示