当前位置：首页 > wzjs >正文

网站开发用的是什么语言大数据营销全网推广

wzjs 2025/8/12 7:43:17

网站开发用的是什么语言,大数据营销全网推广,青岛做网站的好公司,中秋节ppt模板免费下载1. 说明在UI设计中，页面中有些部分的占用空间位置是固定不动，有些部分的区域是根据情况进行动态切换的。比如，一个网页的菜单栏和主题内容展示，往往菜单栏区域的导航按钮占用的空间是固定不动的，当用户点击不同按钮时…

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方法的调用者是$routerif(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>