【vue会员管理系统】篇五之系统首页布局和导航跳转

跳转"/>

【vue会员管理系统】篇五之系统首页布局和导航跳转

一、效果图

1.首页

2.会员管理，跳转，跳其他页面也是如此，该页的详细设计会在后面的章节完善

二、代码

新增文件

components下新增文件

view下新增文件：

1ponets下新建layout.vue

放入以下代码：

<template><div><app-header></app-header><app-nav></app-nav><app-main></app-main></div>
</template><script>
import AppHeader from "./AppHeader/index.vue";
import AppNav from "./AppNav/index.vue";
import AppMain from "./AppMain/index.vue";
export default {components: { AppHeader, AppNav, AppMain },
};
</script><style scoped>
/* 头部 */
.header {position: absolute;line-height: 45px;top: 0px;left: 0px;right: 0px;background-color: #1e486b;
}
.navbar {position: absolute;width: 230px;top: 65px;left: 0px;bottom: 0px;overflow-y: auto;background-color: #4682b4;
}
.main {position: absolute;top: 65px;bottom: 0px;left: 230px;right: 0px;padding: 10px;/* background-color: aquamarine; */
}
</style>

2.在componets下新建AppHeader、AppMain、AppNav文件夹

2.1在AppHeader下新建index.vue   

放入以下代码，这是头部的代码。

图标资源需自己准备

<template><div class="header"><a href="#/"><img src="../../assets/logo1.png" width="50px" /><span class="styname">会员管理系统</span></a><el-dropdown @command="handleCommand"><span class="el-dropdown-link">admin<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item icon="el-icon-edit" command="edit">修改密码</el-dropdown-item><el-dropdown-item icon="el-icon-position" command="exit">退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><script>
export default {methods: {handleCommand(command) {this.$message("click on item " + command);},},
};
</script>
<style scoped>
.styname {color: white;position: absolute;font-size: 20px;margin-left: 15px;margin-top: 10px;
}
/* 下拉菜单 */
.el-dropdown {float: right;margin-right: 45px;margin-top: 15px;
}
.el-dropdown-link {color: white;
}
</style>

2.2在AppMainr下新建index.vue 

存放主界面代码

<template><div class="main"><app-link v-show="$route.path !== '/home'"></app-link><!-- 设置渲染出口是主区域，将内容渲染到这里 --><router-view></router-view></div>
</template><script>
import AppLink from "./Link.vue";
export default {components: { AppLink },
};
</script>

2.3在AppMain下新建Link.vue

存放面包屑代码

<template><!-- 面包屑,更新路由 --><el-breadcrumb separator="/"><el-breadcrumb-item class="line" :to="{ path: $route.path }">{{$route.meta.title}}</el-breadcrumb-item></el-breadcrumb>
</template>
<style scoped>
.el-breadcrumb {height: 10px;padding: 20px;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.line {border-left: 3px solid #31c17b;padding-left: 10px;
}
</style>

2.4在AppNav下新建index.vue

存放左侧菜单栏代码

<template><div class="navbar"><!-- 记得开启路由模式:router="true" ，开启后index的值代表的就是路由地址default-active="1"：默认点击的是哪个background-color="#545c64"：背景色text-color="#fff"：未点击时的颜色active-text-color="#ffd04b"：点击选中后变成的颜色--><el-menu:router="true"default-active="/home"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/home"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-menu-item index="/member/"><i class="el-icon-s-custom"></i><span slot="title">会员管理</span></el-menu-item><el-menu-item index="/supplier/"><i class="el-icon-shopping-cart-2"></i><span slot="title">供应商管理</span></el-menu-item><el-menu-item index="/goods/"><i class="el-icon-shopping-bag-1"></i><span slot="title">商品管理</span></el-menu-item><el-menu-item index="/staff/"><i class="el-icon-user"></i><span slot="title">员工管理</span></el-menu-item></el-menu></div>
</template>
<style scoped>
.el-menu-vertical-demo {height: 100%;
}
.el-menu {border-right: none;
}
</style>

3.在views下新建文件夹

在views下新建如图红框里所示的文件夹和组件。

在每个index.vue里都放入简单的代码，后续我们再进行优化修改。

如：

<template><div>会员管理</div>
</template>

4.修改路由

在router的index.js文件下添加路由

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/login/index.vue"; //引入组件
import Layout from "../../src/components/layout.vue";
import Home from "../views/home/index.vue";
import Member from "../views/member/index.vue";
import Supplier from "../views/supplier/index.vue";
import Staff from "../views/staff/index.vue";
import Goods from "../views/goods/index.vue";
Vue.use(VueRouter);//注意：是export，不是exports
export default new VueRouter({//注意：是没有r的，不是routersroutes: [{path: "/login",name: "login", //路由名称component: Login, //组件名称},{path: "/",component: Layout,redirect: "/home",children: [{path: "/home",component: Home,meta: { title: "首页" },},],},{path: "/member",component: Layout,children: [{path: "/",component: Member,meta: { title: "会员管理" },},],},{path: "/supplier",component: Layout,children: [{path: "/",component: Supplier,meta: { title: "供应商管理" },},],},{path: "/goods",component: Layout,children: [{path: "/",component: Goods,meta: { title: "商品管理" },},],},{path: "/staff",component: Layout,children: [{path: "/",component: Staff,meta: { title: "员工管理" },},],},],
});

三、运行

运行  npm run serve