最终效果图:
现在开始进入正题:
1、安装element-ui
npm i element-ui -S
CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
2.在main.js中引入
3、在 components 中新建导航栏组件
默认颜色
>
导航一
分组一
选项1
选项2
选项3
选项4
选项1
导航二
导航三
data() {return{};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
goTo(path) {this.$router.replace(path);
}
}
};
width:15%;
}
4、在router下的index.js中引入组件,搭配路由
5、添加跳转路径
6、很重要的一点,加上路由出口,也就是右侧显示部分
这样就实现成功啦