39.(前端)欢迎页面的设置

1.创建子组件

1.1概括

在我们登录完，访问home界面时，中间的Main是没实现效果的。我们可以通过给Home挂载一个Wellcome界面。当我们进入时，让其跳转到wellcome界面中。此时，相当于把home作为一个背景，中间添加占位符，把wellocome放入其中即可。

2.代码展示

2.1创建子组件

<!-- src/components/Wellcome.vue -->
<template>
    <h1>Wellcome</h1>
</template>

2.2创建子路由

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Welcome from '../components/Welcome.vue'
import Home from '../components/Home.vue'
// 引入全局样式
import '../assets/css/global.css'


Vue.use(VueRouter)

const routes = [
  // 为login组件创建路由
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 引入子组件，创建子路由
    redirect: '/welcome',
    children: [
      {
        path: '/welcome', component: Welcome
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

export default router



// 根据用户当前是否登录，在访问之前做一个判断
router.beforeEach ((to, from, next) => {
  if (to.path == '/login') return next() // 如果直接访问login界面，那就跳转过去
  // 如果不是直接访问登录界面，看一下他有没有token，如果没有的话，先让他登录，有就想去哪去哪
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

2.3占位

<!-- src/compoents/Home.vue -->
<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <img src="../assets/logo.png">
                <span>电子后台管理系统</span>
            </div>
            <el-button type="primary" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#303133" text-color="#fff" active-text-color="#409EFF" unique-opened>
        <!-- 遍历传递数据给导航 -->
        <!-- 给index加冒号意思是：使他变成一个变量 -->
        <el-submenu :index="item.id+''" v-for=" item in menuList" :key="item.id">
            <template slot="title">
                <i :class="IconObj[item.id+'']"></i>
                <span>{{item.name}}</span>
            </template>
            <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
                <i :class="IconObj[subItem.id+'']"></i>
                    <span>{{subItem.name}}</span>
                    </el-menu-item>
            </el-submenu>
        </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
    </el-container>
    </el-container>
</template>

<script>
import { Icon } from 'element-ui';

export default{
    // 存储导航数据
    data () {
        return {
            menuList: [],
            IconObj:{
                '1':'el-icon-user-solid',
                '2':'el-icon-s-tools',
                '3':'el-icon-s-shop',
                '4':'el-icon-s-order',
                '5':'el-icon-s-tools',
                '11':'el-icon-user',
                '21':'el-icon-setting',
                '22':'el-icon-setting',
                '31':'el-icon-goods',
                '32':'el-icon-goods',
                '33':'el-icon-goods'

            }
        }
    },
    // 创建时被执行的函数
    created () {
        this.getMenulist()
        console.log(this.menuList);
    },
    methods:{
        logout (){
            // 第一步，清除token
            window.sessionStorage.clear()
            // 第二步，跳转到登录页面
            this.$router.push('/login')
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 从后端中获取数据
        // 由于我们想在他刷新页面时候就能够显示出来，所以得改为同步操作；不改的话就可能会找不到
        async getMenulist () {
            const {data: res} = await this.$axios.get('/api/menu')
            // console.log(res.data);
            this.menuList = res.data
            // console.log(res.data);
        }
    }
}
</script>

<style lang="less" scoped>
// 整个组件

.home-container{
    height: 100%;
}
// 界面顶
.el-header{
    display: flex;
    align-items: center; //居中操作
    background-color: #409EFF;
    justify-content: space-between;
    color: #fff;
    font-size: 20px;
    img{
        height: 50px;
        width: 100px;
    }
    div{
        display: flex;
        align-items: center;
    }
}
// 侧面
.el-aside{
    background-color: #303133;
}
// 中间
.el-main{
    background-color: #e4e7ed;
}
</style>