《前端》el-menu导航栏实现方法--2021年1月3日
项目场景和问题描述：
之前做的全供应链看板，不同页面是用页签实现的。现在领导要求用导航栏的方式展现。我当时觉得手册有案例应该很简单，但是，把自己了，做导航栏很简单，但不同页面怎么跳转呢？网上查别人博文都是用router，但是我怎么都不成功。
原因分析：
后来可利说，我这是在html文件中，不能使用vue-router。等今年我要学会webpack打包项目的那种方式。现在先使用html能支持的方式来实现。
两种解决方案：
我能实现到的地方-实现不了点击导航栏在右侧出页面内容
<body>
<div id="menu">
<el-col :span="3">
<el-menu :default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
<el-submenu :index='menuItem.i' v-for="(menuItem ,i) in menuData" :key="i">
<template slot="title">
<i class="el-icon-menu">i>
<span>{{menuItem.title}}span>
template>
<el-menu-item-group v-for="(submenuItem,subi) in menuData[i].subMenu" :key="menuItem.router">
<el-menu-item :index="submenuItem.subi" >{{submenuItem.title}}
el-menu-item>
el-menu-item-group>
el-submenu>
el-menu>
el-col>
<el-col :span="8">
<div class=content> div>
el-col>
div>
<script>
var vm = new Vue({
el: "#menu",
data: {
menuData: [{
i: '1',
title: '全供应链',
subMenu: [{
subi: '1-1',
title: '物资跟踪',
router: '/wz',
}, {
subi: '1-2',
title: '库存分析',
router: '/kc',
}]
}, {
i: '2',
title: '外协生产',
subMenu: [{
subi: '2-1',
title: '外协进度',
router: '/jd',
}, {
subi: '2-2',
title: '外协分析',
router: '/fx',
}]
},],
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
}
});
script>
body>
解决方案1：
通过window.location.href=’.’+val.router+’.html’实现页面跳转。
我也想到过这个方法，但是我没想到怎么实现不用页面的跳转–原来可以用变量实现，如下图，val.router+‘html’ 来打开html链接。然后在目录下制作不同的html页面就可以。
解决方案2：
通过**v-if’**实现页面跳转。
在页面处使用v-if来实现选择哪个页面跳转，添加点击事件，当点击的时候，把val.router传给v-if判断的变量值。
方案1完整代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧栏导航菜单title>
<link rel="stylesheet" href="./lib/css/bootstrap-3.3.4.css">
<link rel="stylesheet" href="./lib/css/element-ui.css">
<script src="./lib/js/jquery-3.5.1.min.js">script>
<script src="./lib/js/vue-2.6.12.js">script>
<script src="./lib/js/[email protected]">script>
<script src="./lib/js/bootstrap-3.3.7.min.js">script>
<script src="./lib/js/element-ui.js">script>
head>
<body>
<div id="menu">
<el-col :span="3">
<el-menu :default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
<el-submenu :index='menuItem.i' v-for="(menuItem ,i) in menuData" :key="i">
<template slot="title">
<i class="el-icon-menu">i>
<span>{{menuItem.title}}span>
template>
<el-menu-item-group v-for="(submenuItem,subi) in menuData[i].subMenu" :key="menuItem.router">
<el-menu-item :index="submenuItem.subi" @click="menuClick(submenuItem)">{{submenuItem.title}}
el-menu-item>
el-menu-item-group>
el-submenu>
el-menu>
el-col>
<el-col :span="8">
<div class=content>
物资跟踪页面内容
div>
el-col>
div>
<script>
var vm = new Vue({
el: "#menu",
data: {
menuData: [{
i: '1',
title: '全供应链',
module: '组织机构',
subMenu: [{
subi: '1-1',
title: '物资跟踪',
router: '/wz',
}, {
subi: '1-2',
title: '库存分析',
router: '/kc',
}]
}, {
i: '2',
title: '外协生产',
module: '组织机构',
subMenu: [{
subi: '2-1',
title: '外协进度',
router: '/jd',
}, {
subi: '2-2',
title: '外协分析',
router: '/fx',
}]
},],
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
menuClick(val) {
window.location.href='.'+val.router+'.html'
},
}
});
script>
body>
html>
方案2完整代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧栏导航菜单title>
<link rel="stylesheet" href="./lib/css/bootstrap-3.3.4.css">
<link rel="stylesheet" href="./lib/css/element-ui.css">
<script src="./js/jquery-3.5.1.min.js">script>
<script src="./lib/js/vue-2.6.12.js">script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js">script>
<script src="./lib/js/bootstrap-3.3.7.min.js">script>
<script src="./lib/js/element-ui.js">script>
<style>
.el-submenu .el-menu-item{
min-width:10px
}
style>
head>
<body>
<div id="menu">
<el-col :span="3">
<el-menu style="width:100%" default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu :index='menuItem.i' v-for="(menuItem ,i) in menuData" :key="i">
<template slot="title">
<i class="el-icon-menu">i>
<span>{{menuItem.title}}span>
template>
<el-menu-item-group v-for="(submenuItem,subi) in menuData[i].subMenu" :key="menuItem.router">
<el-menu-item :index="submenuItem.subi" @click="menuClick(submenuItem)" >{{submenuItem.title}}
el-menu-item>
el-menu-item-group>
el-submenu>
el-menu>
el-col>
<el-col :span="8">
<div class=content>
<div v-if="chooseItem=='/wz'">物资跟踪页面内容div>
<div v-else-if="chooseItem=='/kc'">库存分析页面内容div>
<div v-else-if="chooseItem=='/jd'">外协进度页面内容div>
<div v-else>外协分析页面内容div>
div>
el-col>
div>
<script>
var vm = new Vue({
el: "#menu",
data: {
chooseItem:'/wz',
menuData: [{
i: '1',
title: '全供应链',
subMenu: [{
subi: '1-1',
title: '物资跟踪',
router: '/wz',
}, {
subi: '1-2',
title: '库存分析',
router: '/kc',
}]
}, {
i: '2',
title: '外协生产',
module: '组织机构',
subMenu: [{
subi: '2-1',
title: '外协进度',
router: '/jd',
}, {
subi: '2-2',
title: '外协分析',
router: '/fx',
}]
},],
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
menuClick(val) {
console.log(val)
this.chooseItem=val.router
}
}
});
script>
body>
html>
界面效果
总结
这两种方案我都想到过，但都是因为变量没能运用好导致没有实现出来。