1. 说明
在UI设计中，页面中有些部分的占用空间位置是固定不动，有些部分的区域是根据情况进行动态切换的。比如，一个网页的菜单栏和主题内容展示，往往菜单栏区域的导航按钮占用的空间是固定不动的，当用户点击不同按钮时，在内容区会分别展示不同的页面内容。这种简单的实现方式可以通过设置相关控价的显示和隐藏来实现，本文会记录一种借助VUE框架中的路由导航来实现。
2. 具体步骤
参考前面的文章可知在App.vue文件中已经使用占位控价router-view实现一个首页firstPage的加载，那么如果想在首页中额外开辟一个区域，用于放置后面需要显示的所有页面，就需要将这些页面注册成为首页的子页面。
2.1 创建子页面
首先，先创建两个子页面，用于测试，具体代码如下：
firstPageChildOne.vue
<template>
<div>
<el-card>
<div sot=“header” class=“clearfix”>
<span>this is first child of firstPage</span>
</div>
<div style=“background-color:red;width:300px;height:300px”>
</div>
</el-card>
</div>
<template>
<script>
export default{
name:”firstPageChildOne”,
data(){
return{
}
},
created(){
},
computed:{
},
watch:{
},
methods:{
}
}
</script>
<style scoped>
</style>
在第二个子页面中加入一个按钮，用于返回到第一个页面中
firstPageChildSecond.vue
<template>
<div>
<el-card>
<div sot=“header” class=“clearfix”>
<span>this is second child of firstPage</span>
<el-button style=“float:right;padding:3px 0” type=“text” @click=“goBack”>goBack</el-button>
</div>
<div style=“background-color:blue;width:300px;height:300px”>
</div>
</el-card>
</div>
<template>
<script>
export default{
name:”firstPageChildSecond”,
data(){
return{
}
},
created(){
},
computed:{
},
watch:{
},
methods:{
goBack(){
//这里使用路由导航提供的方法，直接把想要显示的子页面push到路由占位符中
//注意：判断语句中使用的是$route, push方法的调用者是$router
if(this.$route.path != ‘/firstPageChildOne’){
this.$router.push({
name:’firstPageChildOne’
});
}
},
}
}
</script>
<style scoped>
</style>
2.2 注册
创建了两个子页面之后，需要在index.js文件中将这两个页面注册成为firstPage的子页面，具体代码如下：
import Vue from “vue”;
import VueRouter from “vue-router”;
Vue.use(VueRouter);
const router = new VueRouter({
mode:”history”,
routes:[
{
path:”/“,
name:”firt_page”,
component: () => import(“@/components/firstPage.vue”),
//指定默认显示的子页面
redirect:’/firstPagechildOne’,
//添加子元素
children:[
{
path:’/firstPageChildOne’,
name:’firstPageChildOne’,
component:() => import(‘@/components/firstPageChildOne.vue’)
},
{
path:’/firstPageChildSecond’,
name:’firstPageChilSecond’,
component:() => import(‘@/components/firstPageChildSecond.vue’)
},
]
},
],
});
export default router;
2.3 添加占位符
最后，因为新增的两个页面是作为firstPage的子页面进行显示的，那么在firstPage页面当中应该添加一个路由导航占位符，用来指定在什么位置显示这两个子页面。具体代码如下：
<template>
<div class=“rootManager”>
<el-card class=“first-box-card”>
<div slot=“header” class=“clearfix”>
<span>这是主页面</span>
<el-button style=“float:right;padding:3px 0” type=“text” @click=“openChildPage”>打开第二个子页面</el-button>
</div>
<div class=“viewContainer”>
<!——添加子页面路由占位符——>
<router-view></router-view>
</div>
<el-card>
</div>
</template>
<script>
export default{
name:’first_page’,
data(){
return{
}
},
created(){
},
computed:{
},
watch:{
},
methods:{
openChidPage(){
if(this.$route.path != ‘./firstPageChildSecond’){
this.$router.push(
name:’firstPageChildSecond’,
);
}
},
}
}
</script>
<style scoped>
.rootmanager{
padding:0px;
display:flex;
justify-content:center;
align-items:center;
margin-top:10px;
}
.first-box-card{
position:relative;
width:1300px;
height:1000px;
margin:100px auto;
}
.viewContainer{
width:600px;
height:600px;
}
<style>
注：firstPage页面的显示的具体位置是在App.vue 中的占位符进行控制的。
3. 提示
上述代码可以实现一级页面和二级页面之间的嵌套显示，如果在二级页面中也需要动态展示不同的页面，那么相当于在二级页面中也需要像上述操作一样添加并注册属于二级页面的子页面(三级页面)，如果在三级页面也有需要动态展示的，那就以此类推进行代码结构的设计。