基於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中，實現了頁面的載入。