文章目录
- 前言
- 一、elementui Tabs标签页和NavMenu 导航菜单是什么？
- 二、使用方式
- 1.代码如下
- 2.页面效果
- 总结
前言
写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里，为了写更少的代码还有看起来更简洁做了许多偷懒操作，比如用elementui 的Tabs标签页当NavMenu 导航菜单用，虽然效果上看起来差不多，但是导航菜单功能更强大，也更能体现出CDN模式下vue的router、templete的挂载状态，这样才能更好的学习vue、vue-router，开发页面较少的项目时还可以用这种方式少写很多代码。当然，也是为了以后用起vue来更顺手。
一、elementui Tabs标签页和NavMenu 导航菜单是什么？
官方文档：https://element.eleme.cn/#/zh-CN/component/menu
二、使用方式
1.代码如下
就这一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<template id="sign">
<div class="handle">
<div class="handle-input">
<el-button @click="login" plain>登录</el-button>
</div>
</div>
</template>
<template id="manager">
<div>
<el-menu
:default-active="this.$router.path"
class="el-menu-demo"
mode="horizontal"
router
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="/manager/manager1">用户管理</el-menu-item>
<el-menu-item index="/manager/manager2">角色管理</el-menu-item>
<el-menu-item index="/manager/manager3">权限管理</el-menu-item>
</el-menu>
<router-view></router-view>
</div>
</template>
<template id="manager1">
<span>模板1：用户管理</span>
</template>
<template id="manager2">
<span>模板2：角色管理</span>
</template>
<template id="manager3">
<span>模板3：权限管理</span>
</template>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import Router -->
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script>
const Sign = {
props: ['todo'],
template: '#sign',
data() {
return {
username: ''
}
},
methods: {
login() {
this.$router.push({
name: 'manager',
params: {
}
});
}
},
mounted() {
console.log('组件Sign被挂载了');
}
};
const Manager = {
props: ['todo'],
template: '#manager',
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
mounted() {
console.log('组件Manager被挂载了');
},
created() {
}
};
const Manager1 = {
props: ['todo'],
template: '#manager1',
data() {
return {
token: ''
}
},
methods: {
},
mounted() {
console.log('组件Manager1被挂载了');
},
created() {
}
};
const Manager2 = {
props: ['todo'],
template: '#manager2',
data() {
return {
token: ''
}
},
methods: {
},
mounted() {
console.log('组件Manager2被挂载了');
},
created() {
}
};
const Manager3 = {
props: ['todo'],
template: '#manager3',
data() {
return {
token: ''
}
},
methods: {
},
mounted() {
console.log('组件Manager3被挂载了');
},
created() {
}
};
const router = new VueRouter({
routes:[
{
path: '/',
name: 'sign',
component: Sign
},
{
path: '/manager',
name: 'manager',
component: Manager,
children:[
{
path: 'manager1',
component: Manager1
},
{
path: 'manager2',
component: Manager2
},
{
path: 'manager3',
component: Manager3
}
]
}
]
});
new Vue({
router,
el: '#app',
data: {
},
methods: {
}
});
</script>
<style>
.handle {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
background-image: url(banner.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.handle-input {
display: flex;
flex-direction: column;
}
</style>
</html>
2.页面效果
总结
这回贴的代码简洁明了了，没啥好总结的。哦，还有，如果标签页还需要携带参数的话可以参考这篇文章https://blog.csdn.net/qq_40197100/article/details/111587781 ，或者在el-menu-item标签里写个@click事件直接调路由。
