Vue的SPA单页面开发

一、什么是SPA

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

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

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

二、SPA的实现过程

1. • 首先配置一级路由

在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'}

        ],