Vue的SPA单页面开发

一、什么是SPA

SPA全称（single page Aplication）单页面应用

目前在项目开发过程中只会存在一个HTML文件，在这个文件中动态引入组件，通过组件的自由搭配，实现页面上不同布局的优势

在Vue项目，public文件夹存在index.html，这个就是唯一的html，以后所有的代码都在vue文件写，动态显示到html中就实现加载效果

二、SPA的实现过程

首先配置一级路由

在views文件夹下下面创建三个页面

Login.vue登录页面

regist.vue注册页面

Home.vue主页页面

在路由注册文件配置映射关系

import VueRouter from 'vue-router';import Vue from 'vue';import Home from '../components/home.vue'import Regist from '../components/regist.vue'import Login from '../components/login.vue'Vue.use(VueRouter)const routes = [{path:'/',name:'Home',component:Home},{path:'/regist',name:'Regist',component:Regist},{path:'/login',name:'Login',component:Login}]const router = new VueRouter({mode:'history',base:process.env.BASE_URL,routes})export default router

注意:

这里面我没有采用路由的懒加载,如果需要懒加载可以采用下面这种方法

{path:'/login',name:'Login',component:()=>import('../view/Login.vue') 懒加载}

2、第二步嵌套路由（二级路由）

在Home主页中我们能需要引入外部很多组件，实现动态切换

优先考虑的使用嵌套路由来实现，暂时没有考虑动态组件来实现

import VueRouter from 'vue-router';import Vue from 'vue';import Home from '../components/home.vue'import Regist from '../components/regist.vue'import Login from '../components/login.vue'import Main from '../views/subs/Main.vue'import student from '../views/subs/student.vue'import teacher from '../views/subs/teacher.vue'import classes from '../views/subs/classes.vue'Vue.use(VueRouter)const routes = [{path:'/',redirect:'/login'},{path:'/',name:'Home',component:Home,children:[{path:'/',name:'Main ',component:Main},{path:'student',name:'studentt',component:student},{path:'teacher',name:'taeacher',component:teacher,},{path:'classes',name:'classes',component:classes}]},{path:'/regist',name:'Regist',component:Regist},{path:'/login',name:'Login',component:Login}]const router = new VueRouter({mode:'history',base:process.env.BASE_URL,routes})export default router

注意：

嵌套路由路径前面不要添加“ / ”。

Home中动态加载路由，必须在Home这个组件内部配置渲染出口

<template><div class="main"><div class="leftNav"><ul><li v-for="item in menus" :key="item.id"@click="changeCheck(item.id)":class='{check:currentTag==item.path}' ><i :class=' item.icon '></i> <router-link :to="item.path">{{item.title}}</router-link></li> </ul></div><div class="rightContent"><!-- 显示需要加载的页面 --><!-- 二级路由渲染出口 --><router-view></router-view></div></div></div></template><script>export default {data(){return{menus:[{id:1,title:'首页',icon:'fa fa-align-justify',path:'/Home'},{id:2,title:'学生管理',icon:'fa fa-address-card',path:'/Home/student'},{id:3,title:'班级管理',icon:'fa fa-bank',path:'/Home/classes'},{id:4,title:'老师管理',icon:'fa fa-user-circle',path:'/Home/teacher'}],