vue的SPA(单页面应用)怎么实现的?

昨天大学同学问我小程序的子页面可不可以也有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里面进行页面切换，从而实现单页面。