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 (){// 第一步，清除tokenwindow.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>

39.(前端)欢迎页面的设置相关推荐

php nodejs 前台,NodeJS之前端注册页面
本文主要给大家介绍了NodeJS之前端注册页面的相关知识,文中通过示例代码介绍的非常详细,对大家学习具有一定的参考学习价值,希望能帮助到大家. app.js文件为://应用程序的启动入口文件 //加载 ...
面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
戳蓝字「前端技术优选」关注我们哦! 引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有 ...
两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...
手机Web前端调试页面之——Chrome DevTools（谷歌浏览器）的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试前言在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...
前端HTML页面实现批量下载
前端HTML页面实现批量下载一.前言前端HTML实现下载功能可在JavaScript 代码中写window.location.href ="链接地址",但是如果想同时打开多个链 ...
【前端html页面数据导出为pdf文件】
[前端html页面数据导出为pdf文件] 文前白话在网页端导出 Excel 数据表格保存本地前端html页面数据导出为pdf文件文前白话项目需要,将网页端查询的数据结果与数据分析结果导出文件, ...
SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
h5 默认为移动端页面_20条移动前端H5页面开发规范，h5开发必看文档
这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...

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

1.创建子组件

1.1概括

2.代码展示

2.1创建子组件

2.2创建子路由

2.3占位

39.(前端)欢迎页面的设置相关推荐

最新文章

热门文章