最终效果图:
现在开始进入正题:
1, 安装 element-ui
- NPM i element-ui -S
- CDN
目前可以通过 https://unpkg.com/element-ui/ 获取到最新版本的资源, 在页面上引入 JS 和 CSS 文件即可开始使用.
- <!-- 引入样式 -->
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
- <!-- 引入组件库 -->
- <script src="https://unpkg.com/element-ui/lib/index.js">
- </script>
2. 在 main.JS 中引入
3, 在 components 中新建导航栏组件
- <template>
- <el-row class="tac">
- <el-col :span="12">
- <h5 > 默认颜色 </h5>
- <el-menu
- default-active="2"
- class="el-menu-vertical-demo"
- @open="handleOpen"
- @close="handleClose"
- >
- <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="/demo" @click="goTo('/demo')">
- <i class="el-icon-menu"></i>
- <span slot="title"> 导航二 </span>
- </el-menu-item>
- <el-menu-item index="/index" @click="goTo('/index')">
- <i class="el-icon-setting"></i>
- <span slot="title"> 导航三 </span>
- </el-menu-item>
- </el-menu>
- </el-col>
- <router-view></router-view>
- </el-row>
- </template>
- <script>
- export default {
- data() {
- return {};
- },
- methods: {
- handleOpen(key, keyPath) {
- console.log(key, keyPath);
- },
- handleClose(key, keyPath) {
- console.log(key, keyPath);
- },
- goTo(path) {
- this.$router.replace(path);
- }
- }
- };
- </script>
- <style scoped>
- .el-col-12{
- width: 15%;
- }
- </style>
4, 在 router 下的 index.JS 中引入组件, 搭配路由
5, 添加跳转路径
6, 很重要的一点, 加上路由出口, 也就是右侧显示部分
这样就实现成功啦
来源: http://www.bubuko.com/infodetail-3040537.html