我现在有4个画面 A,B,C,D
A是顶级画面,显示A的时候在A中有一个<router-view></router-view>来显示B,
A画面的代码:
<template>
<div>
<h2>这是顶级画面A</h2>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "A"
}
</script>
B画面的代码:
<template>
<div>这是B画面</div>
<router-link :to="{name: 'C'}">跳转到C画面</router-link>
</template>
<script>
export default {
name: "B"
}
</script>
现在还有C画面,当点击B画面的按钮时想要把C画面的内容显示带A的<router-view></router-view>中,应该怎么处理?
C画面的代码:
<template>
<div>这是C画面</div>
<router-link :to="{name: 'D'}">跳转到D画面</router-link>
</template>
<script>
export default {
name: "C"
}
</script>
如果还有D画面,是从C画面跳转过去的,也想显示到A画面的<router-view></router-view>中,
D画面的代码:
<template>
<div>这是D画面</div>
</template>
<script>
export default {
name: "D"
}
</script>
A,B,C,D 4个画面的关系是各自的子画面,
如果路由的把B,C,D3个画面配置成同级画面,而是向下面这样配置,路由的代码:
{
name: 'A',
path: '/a',
component: A,
redirect: 'B',
children: [
{
name: 'B',
path: 'b',
component: B,
children: [
{
name: 'C',
path: 'c',
component: C,
children: [
{
name: 'D',
path: 'd',
component: D
}
]
}
]
}
]
},
如果路由这样设置 ,可以实现画面之间的迁移吗？
需要路由怎么设置,画面怎样跳转
