版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xxdddail/article/details/89884290
基于vue和emelent ui来创建菜单栏，可以通过官方的demo来实现，而页面的载入，由于我们没有使用vue-route的路由式的载入，所以我们选用iframe来载入，实现的效果如下图
default.aspx的页面代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="AspNetVueElementUI._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>管理系统</title>
<style>
body, html {
margin: 0px;
height: 100%;
width: 100%;
}
/* 所有 */
#app {
width: 100%;
height: 100%;
}
/* 头 */
.header {
color: rgba(255, 255, 255, 0.75);
line-height: 60px;
background-color: #24292e;
text-align: center;
}
.header div {
display: inline;
}
.title {
}
.user {
float: right;
}
.user-img {
width: 20px;
height: 20px;
}
.user-poiner {
cursor: pointer;
}
/* 内容区 */
.container {
/*min-height: 600px;*/
width: 100%;
height: 100%;
overflow: hidden;
}
/* 左边内容区 */
.left {
color: #4b595f;
width: 200px;
}
.left .menu-ui {
height: 93%;
}
/* 右边内容区 */
.right {
min-width: 200px;
}
tbody {
font-size: 15px;
color: #4b595f;
}
.logo {
float: left;
}
.logo img {
padding-top: 10px;
width: 45px;
height: 45px;
}
.logout {
float: right;
padding-left: 10px;
}
.el-main {
padding: 0px !important;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function () {
new Vue({
el: "#app",
data: {
activeIndex: "1",
aboutMeUrl: "/Pages/About.aspx",
iframeUrl: "/Pages/About.aspx",
logouting: false,
userInfo: global.getUser(),
menus: [
{
name: "产品管理",
id: "1",
iconClass: "el-icon-goods",
children: [
{
name: "产品",
id: "1-1",
children: [
{ name: "产品查询", id: "1-1-1", url: "/Pages/ProductManage/ProductQuery/ProductQuery.aspx" },
{ name: "产品查询2", id: "1-1-2", url: "自行定义" }
]
}
]
},
{
name: "订单管理",
id: "2",
iconClass: "el-icon-goods",
children: [
{
name: "订单",
id: "2-1",
children: [
{ name: "订单查询", id: "2-1-1", url: "自行定义" },
{ name: "订单查询2", id: "2-1-2", url: "自行定义" }
]
}
]
}
]
},
methods: {
open(url) {
this.iframeUrl = url;
},
logout: function (event) {
var url = '/API/Login/Logout';
this.logouting = true;
this.$http.get(url).then(function (res) {
var result = res.body;
this.$message({
message: result.Message,
type: result.Status == 0 ? 'success' : 'error'
})
this.logouting = false;
if (result.Status == 0) {
window.location ="/Login/Login.aspx";
}
}, function () {
this.$message({
message: '登出异常',
type: 'error'
})
this.logouting = false;
});
}
}
});
}
</script>
</head>
<body>
<div id="app">
<el-container class="container">
<el-header class="header">
<div class="logo">
<img src="Images/logo.png" />
</div>
<div class="title">
<span>管理系统</span>
</div>
<div class="user">
<img class="user-img user-poiner" src="/Images/user.png" />
<i class="el-icon-location-outline user-poiner">{{userInfo.UserName}}</i>
<div class="logout">
<el-button id="login" v-on:click="logout" style="width:100%" type="primary" v-loading.fullscreen.lock="logouting">登出</el-button>
</div>
</div>
</el-header>
<el-container class="container">
<el-aside class="left">
<el-menu :default-active="activeIndex" class="menu-ui">
<el-menu-item index="1" @click="open(aboutMeUrl)"><i class="el-icon-service"></i>DEMO</el-menu-item>
<el-submenu :index="firstMenu.id" v-for="firstMenu in menus" :key="firstMenu.id">
<template slot="title">
<i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}
</template>
<el-menu-item-group v-if="firstMenu.children&&firstMenu.children[0].children" v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
<template slot="title">
{{ secondMenu.name }}
</template>
<el-menu-item v-for="thirdMenu in secondMenu.children" :index="thirdMenu.id"
:key="thirdMenu.id" @click="open(thirdMenu.url)">
{{ thirdMenu.name }}
</el-menu-item>
</el-menu-item-group>
<el-menu-item v-else v-for="child in firstMenu.children" :index="child.id"
:key="child.id" @click="open(child.url)">
{{ child.name }}
</el-menu-item>
</el-submenu>
</el-aside>
<el-main class="right">
<iframe style="width:100%; height:100%; border: 0;" :src="iframeUrl"></iframe>
</el-main>
</el-container>
</el-container>
</div>
</body>
</html>
default.aspx的cs代码需要继承PageBase，代码如下
public partial class _default : PageBase
{
protected void Page_Load(object sender, EventArgs e)
{
}
}其中About.aspx页面是直接创建的一个简单页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="AspNetVueElementUI.Pages.About" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
欢迎使用
</div>
</form>
</body>
</html>
菜单栏的配置menus，可以通过api请求，从后台获取，也可以通过权限的判断，来动态生成对应用户可访问的菜单项。
在菜单项的click事件中通过open方法，将页面对应的url赋值到iframe中，实现了页面的载入。