昨天大学同学问我小程序的子页面可不可以也有tabbar,他用的是uniapp,从来没遇到这样的需求,于是我查了uniapp的官方文档以及各个博客,都没有给出一个满意的答案。一是可以在子页面的下方绝对定位一个一模一样的tabbar,但这样页面跳转的时候tabbar会一闪而过,用户体验不是很好。第二个方法呢就是spa,这只是我的一个想法,没有去实践。回想起以前的项目基本都是CRM,单页面怎么应用的来着,我竟然忘了,于是今天花一个小时,巩固一下。
这里单页面的设计与应用的精髓是路由的设置,写下来给大家看代码吧
import Vue from 'vue'
import VueRouter from 'vue-router'
import TestNexttick from '../components/Test_nexttick.vue'
import Login from '../components/login.vue'
import Index from '../components/index.vue'
import Welcome from '../components/Welcome.vue'
import AddUser from '../components/user/AddUser.vue'
import UserList from '../components/user/UserList.vue'
import AddGoods from '../components/goods/AddGoods.vue'
import GoodsList from '../components/goods/GoodsList.vue'
Vue.use(VueRouter)
const routes = [//添加路由对象
{
path:'/',component:Login},
{
path: '/index',
component: Index,
children: [//子路由,表示在index页面的路由
{
path: '/index', component: Welcome },//默认显示welcome页面
{
path: '/user/list', component: UserList },
{
path: '/goods/list', component: GoodsList },
] }
]
const router = new VueRouter({
mode:'history',//采用哪种路由模式,默认是history,可改为hash
routes
})
export default router
第二借助elementui的layout进行布局(index.vue)
<template>
<div>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data(){
return{
isCollapse:false
}
},
methods:{
login(){
this.$router.push('/index')
},
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
这样在el-main里面理由路由占位符,可以在el-main里面进行页面切换,从而实现单页面。