vue 右边跳转 实现左侧栏_Vue 实现左边导航栏且右边显示具体内容（element-ui）...

最终效果图：

现在开始进入正题：

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、很重要的一点，加上路由出口，也就是右侧显示部分

这样就实现成功啦