SPA项目开发之首页导航+左侧菜单(1)

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！

选项1

导航二

导航三

导航四

TopNav.vue:

<img class=“showimg” :src=“collapsed?imgshow:imgsq” @click=“doToggle()”>

超级管理员

设置

个人中心

<el-menu-item @click=“exit()” index=“2-3”>退出

2、导入图片

3、配置组件

index.js:

// 在路由中定义

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

import Login from ‘@/views/Login’

import Reg from ‘@/views/Reg’

import AppMain from ‘@/components/AppMain’

import LeftNav from ‘@/components/LeftNav’

import TopNav from ‘@/components/TopNav’

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/’,

name: ‘Login’,

component: Login

},

{

path: ‘/Login’,

name: ‘Login’,

component: Login

},

{

path: ‘/Reg’,

name: ‘Reg’,

component: Reg

},

{

path: ‘/AppMain’,

name: ‘AppMain’,

component: AppMain,

children:[

{

path: ‘/LeftNav’,

name: ‘LeftNav’,

component: LeftNav

},

{

path: ‘/TopNav’,

name: ‘TopNav’,

component: TopNav

}

]

}

]

})

4、登录跳转界面

Login.js文件中添加登陆成功后的界面的跳转：

this.$router.push({path:‘/AppMain’});

5、定义变量，注册组件

AppMain:

Main

// 导入组件

import TopNav from ‘@/components/TopNav.vue’

import LeftNav from ‘@/components/LeftNav.vue’

// 导出模块

**export default {

data(){

return {

asideClass:‘main-aside’

}

},

// 注册组件

components:{

TopNav,LeftNav

}

};**

.main-container {

height: 100%;

width: 100%;

box-sizing: border-box;

}

/* 折叠 */

.main-aside-collapsed {

/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */

width: 64px !important;

height: 100%;

background-color: #334157;

margin: 0px;

}

/* 不折叠 */

.main-aside {

width: 240px !important;

height: 100%;

background-color: #334157;

margin: 0px;

}

.main-header,

.main-center {

padding: 0px;

border-left: 2px solid #333;

}

topNav:定义变量

**

export default {

data(){

return{

collapsed:false,

// 不折叠时需显示的图片

imgshow:require(‘@/assets/img/show.png’),

imgsq:require(‘@/assets/img/sq.png’)

}

}

}**

LeftNav:记得将不用的因素清掉

**<el-menu default-active=“2” class=“el-menu-vertical-demo”  background-color=“#334157”

text-color=“#fff” active-text-color=“#ffd04b” :collapse=“collapsed”>**

导航一

分组一

选项1

选项2

选项3

选项4

选项1

导航二

导航三

导航四

**

export default {

data(){

return{

collapsed:false

}

}

}

**

.el-menu-vertical-demo:not(.el-menu–collapse) {

width: 240px;

min-height: 400px;

}

.el-menu-vertical-demo:not(.el-menu–collapse) {

border: none;

text-align: left;

}

.el-menu-item-group__title {

padding: 0px;

}

.el-menu-bg {

background-color: #1f2d3d !important;

}

.el-menu {

border: none;

}

.logobox {

height: 40px;

line-height: 40px;

color: #9d9d9d;

font-size: 20px;

text-align: center;

padding: 20px 0px;

}

.logoimg {

height: 40px;

}

呈现结果：

6、完成点击左上角进行收缩

①、定义主线：main.js

new Vue({

el: ‘#app’,

data(){

**return{

// 定义主线

Bus:new Vue({

})

}**

},

router,

components: { App },

template: ‘’

})

②、图片切换，定义点击事件

TopNav:

export default {

data(){

return{

collapsed:false,

// 不折叠时需显示的图片

imgshow:require(‘@/assets/img/show.png’),

imgsq:require(‘@/assets/img/sq.png’)

}

},

methods:{

doToggle(){

this.collapsed=!this.collapsed;

}

}

}

        

注册事件：TopNav

export default {

data(){

return{

collapsed:false,

// 不折叠时需显示的图片

imgshow:require(‘@/assets/img/show.png’),

imgsq:require(‘@/assets/img/sq.png’)

}

},

methods:{

doToggle(){

this.collapsed=!this.collapsed;

this.$root.Bus.$emit(“collapsed-aside”,this.collapsed);

}

}

}

监听：LeftNav

export default {

data(){

return{

collapsed:false

}

},

**// 组件被访问时触发,v指的是折叠的变量

created(){

this.$root.Bus.$on(“collapsed-aside”,(v)=>{

this.collapsed=v;

});

}**

}

AppMain:

// 导入组件

import TopNav from ‘@/components/TopNav.vue’

import LeftNav from ‘@/components/LeftNav.vue’

// 导出模块

export default {

data(){

return {

asideClass:‘main-aside’

}

},

// 注册组件

components:{

TopNav,LeftNav

},

**// 组件被访问时触发,v指的是折叠的变量

created(){

this.$root.Bus.$on(“collapsed-aside”,(v)=>{

this.asideClass=v ? 'main-aside-collapsed ’ : ‘main-aside’;

});

}**

};

效果：

三、退出功能

---

退出的点击方法：TopNav

export default {

data(){

return{

collapsed:false,

// 不折叠时需显示的图片

imgshow:require(‘@/assets/img/show.png’),

imgsq:require(‘@/assets/img/sq.png’)

}

},

methods:{

doToggle(){

this.collapsed=!this.collapsed;

this.$root.Bus.$emit(“collapsed-aside”,this.collapsed);

},

exit(){

this.$router.push({path:‘/Login’});

}

}

}

最后

每年转战互联网行业的人很多，说白了也是冲着高薪去的，不管你是即将步入这个行业还是想转行，学习是必不可少的。作为一个Java开发，学习成了日常生活的一部分，不学习你就会被这个行业淘汰，这也是这个行业残酷的现实。

如果你对Java感兴趣，想要转行改变自己，那就要趁着机遇行动起来。或许，这份限量版的Java零基础宝典能够对你有所帮助。

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！
apsed:false,

// 不折叠时需显示的图片

imgshow:require(‘@/assets/img/show.png’),

imgsq:require(‘@/assets/img/sq.png’)

}

},

methods:{

doToggle(){

this.collapsed=!this.collapsed;

this.$root.Bus.$emit(“collapsed-aside”,this.collapsed);

},

exit(){

this.$router.push({path:‘/Login’});

}

}

}

最后

每年转战互联网行业的人很多，说白了也是冲着高薪去的，不管你是即将步入这个行业还是想转行，学习是必不可少的。作为一个Java开发，学习成了日常生活的一部分，不学习你就会被这个行业淘汰，这也是这个行业残酷的现实。

如果你对Java感兴趣，想要转行改变自己，那就要趁着机遇行动起来。或许，这份限量版的Java零基础宝典能够对你有所帮助。

[外链图片转存中…(img-umCs1bqm-1714746112987)]

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！