【易购管理系统】路由界面基础搭建

路由基础搭建

我们分析一下这个项目

这个页面点到退出的页面以后，和我们上面窗口同级的有个登陆界面

我们在配置的过程中，一个大的主界面和我们的登录界面是同级的。所以我们的路由配置有两个一个是页面布局配置和同级登录界面配置

页面布局配置
在view中新建Layout文件夹，在其中新建index.vue文件

<template><div><h2>布局</h2></div>
</template><script>
export default {}
</script><style></style>

登录界面配置
在view中新建Login文件夹，在其中新建login.vue文件

<template><div><h2>登录</h2></div>
</template><script>
export default {}
</script><style></style>

然后再我们的router的index.js中进行配置

import Vue from 'vue';
import VueRouter from 'vue-router';
import Layout from '../views/Loyout/index.vue';
import Login from '../views/Login/Login.vue'Vue.use(VueRouter);const routes = [{path: '',component: Layout,},{path: '/login',name: 'Login',component: Login}
];const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes,
});export default router;

再到app.vue中写上 < router-view>

<template><div id="app"><router-view></router-view></div>
</template>

效果为

布局又分为左侧和右侧。

我们在Layout文件中新建Mymenu.vue文件，是我们的左侧导航区域

<template><div><h2>导航区域</h2></div>
</template><script>
export default {}
</script><style></style>

我们在Layout文件中新建Content.vue文件，是我们的右侧内容区域

<template><div><div class="header">顶部区域</div><!-- 内容区域 --><div class="content">内容区域</div></div>
</template><script>
export default {}
</script><style lang='less' scoped>
.header {height: 50px;line-height: 50px;color: #fff;background: #1e78bf;
}
</style>

然后再到index.vue中将这两个组件作为子组件导入

<template><div class="layout"><!-- 左侧导航区域 --><Mymenu class="menu"></Mymenu><!-- 右侧内容区域 --><Content class=""></Content></div>
</template><script>import Content from './Content.vue'
import Mymenu from './Mymenu.vue'
export default {components: {Content,Mymenu
}
}
</script><style></style>

设置一下样式

<style lang='less' scoped>
.layout{.menu{// width: 200px;// min-height: 500px;background: #112f50;position: fixed;top:0;bottom:0;}
}</style>

Layout是一级路由，它里面套着二级。
我们新建文件夹

然后在router文件夹中的index.js中配置路由信息

import Vue from 'vue';
import VueRouter from 'vue-router';
import Layout from '../views/Loyout/index.vue';
import Login from '../views/Login/Login.vue';
import Home from '../views/Home/index.vue';//异步
const Goods = () =>import ('../views/Goods/Goods.vue')
const Params = () =>import ('../views/Params/Params.vue')
const Advert = () =>import ('../views/Advert/Advert.vue')
const Order = () =>import ('../views/Order/index.vue')Vue.use(VueRouter);const routes = [{path: '',component: Layout,children: [{path: '/',name: 'Home',component: Login},{path: '/goods',name: 'Goods',component: Goods},{path: '/advert',name: 'Advert',component: Advert},{path: '/params',name: 'Params',component: Params},{path: '/order',name: 'Order',component: Order}]},{path: '/login',name: 'Login',component: Login}
];const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes,
});export default router;

然后在Mymenu.vue中

<template><div><ul><li><router-link to="/">首页</router-link></li><li><router-link to="/goods">商品管理</router-link></li><li><router-link to="/params">规格参数</router-link></li><li><router-link to="/advert">广告分类</router-link></li><li><router-link to="/order">订单管理</router-link></li></ul></div>
</template><script>
export default {}
</script><style></style>

紧接着，在Order文件夹中新建OrderList文件夹，OrderBack文件夹

然后再到路由文件中进行配置

const OrderList = () =>import ('../views/Order/OrderList/index.vue')
const OrderBack = () =>import ('../views/Order/OrderBack/index.vue')

{path: '/order',name: 'Order',component: Order,children: [{path: 'order-list',component: OrderList,},{path: 'order-back',component: OrderBack,}]}

最后的结果是

http://localhost:8080/order/order-list

输入上面的这一行会出来

还需要做一个重定向

  {path: '/order',name: 'Order',component: Order,redirect: '/order/order-list',children: [{path: 'order-list',component: OrderList,},{path: 'order-back',component: OrderBack,}]}

此时页面上的左侧还不是我们想要的样式，我们就可以在elementUI里面拿东西了
找到库里面的导航菜单

的自定义一栏的代码复制下来，代替Mymenu.vue中的ul>li中的内容

<div><el-menudefault-active="1"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><!-- 带有下拉的 --><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></div>

效果如下：

适当的进行修改

<div><el-menudefault-active="1"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-menu-item index="2" ><i class="el-icon-document"></i><span slot="title">商品管理</span></el-menu-item><el-menu-item index="3"><i class="el-icon-setting"></i><span slot="title">规格参数</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">广告分类</span></el-menu-item><el-submenu index="5"><template slot="title"><i class="el-icon-location"></i><span>订单管理</span></template><el-menu-item-group><el-menu-item index="5-1">订单列表</el-menu-item><el-menu-item index="5-2">退货管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></div>

结果如下：

因为路由的配置

我们需要修改

<el-menudefault-active="/"
<el-menu-item index="/">

修改整体如下

   <el-menu  router="true"default-active="/"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-menu-item index="/goods" ><i class="el-icon-document"></i><span slot="title">商品管理</span></el-menu-item><el-menu-item index="/params"><i class="el-icon-setting"></i><span slot="title">规格参数</span></el-menu-item><el-menu-item index="/advert"><i class="el-icon-setting"></i><span slot="title">广告分类</span></el-menu-item><el-submenu index="/order"><template slot="title"><i class="el-icon-location"></i><span>订单管理</span></template><el-menu-item-group><el-menu-item index="/order/order-list"><i class="el-icon-location"></i><span>订单列表</span></el-menu-item><el-menu-item index="/order/order-back"><i class="el-icon-location"></i><span>退货管理</span></el-menu-item></el-menu-item-group></el-submenu></el-menu>

结果为：

再看一下折叠属性

我们在menu中添加折叠属性

效果如下

但是我们并不是直接折叠的，我们是点击一个按钮，由这个按钮来进行控制是否折叠，从而控制collapse是true还是false

【易购管理系统】路由界面基础搭建相关推荐

【易购管理系统】商品列表
我们来写一下商品管理界面在Goods.vue中 <template><div><div class="header& ...
【易购管理系统】导航折叠效果
在el-menu中添加 v-model="isCollapse" <el-menu router="true"default-active="/ ...
mysql 设计超市订单图_利用maven模板写一个超市订单管理系统(1)项目基础搭建
步骤: 1.创建并配置maven,(这里我用的是maven3.6.1版本,没用idea自带maven) 1.1配置web.xml版本(因为使用idea模板时默认配置的是web 1版本),在这里我自定义 ...
elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
EasyUI 搭建后台登录界面和管理系统主界面
EasyUI介绍 1.EasuyUI介绍: EasyUI:简单的界面设计框架,作用主要是用来设计网站的后台管理系统.帮助程序员快速的构建网站界面. 特点: 基于jQuery的一个UI插件 2.Easy ...
【练习】苏宁易购注册界面的实现
html代码+css代码 <!DOCTYPE html><html><head><meta charset="utf-8">< ...
爽易购商城--后台管理
一.项目简介 1.项目背景 1).电商模式市面上有5种常见的电商模式:B2B.B2C.C2B.C2C.O2O: B2B模式 Business to Business,是指商家之间的商业关系,如:阿里 ...
苏宁11.11：苏宁易购订单搜索系统架构及实现
背景随着苏宁易购平台规模的飞速发展,平台的订单量呈现指数级的增长,存储容量已达TB级,订单量更是到了万亿级别,尤其在双11大促流量洪峰的场景下,面临两个挑战: 1.如何存储如此巨大的数据量 2.如何 ...
表格控件对比_小白如何开发出苏宁易购同款表格协同文档系统？
SpreadJS是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,具有 "高性能.跨平台.与 Excel 高度兼容"的产品特性,满足 Web ...

【易购管理系统】路由界面基础搭建

路由基础搭建

【易购管理系统】路由界面基础搭建相关推荐

最新文章

热门文章