Vue 实现左边导航栏且右边显示具体内容(element-ui)

最终效果图:

Vue 实现左边导航栏且右边显示具体内容(element-ui)_第1张图片

 

 Vue 实现左边导航栏且右边显示具体内容(element-ui)_第2张图片

现在开始进入正题:

1、安装element-ui

npm i element-ui -S

 

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。




2.在main.js中引入

 

3、在 components 中新建导航栏组件





 

4、在router下的index.js中引入组件,搭配路由

Vue 实现左边导航栏且右边显示具体内容(element-ui)_第3张图片

 

5、添加跳转路径

Vue 实现左边导航栏且右边显示具体内容(element-ui)_第4张图片   

 

Vue 实现左边导航栏且右边显示具体内容(element-ui)_第5张图片

 

6、很重要的一点,加上路由出口,也就是右侧显示部分

Vue 实现左边导航栏且右边显示具体内容(element-ui)_第6张图片

 

这样就实现成功啦

转载于:https://www.cnblogs.com/mica/p/10790976.html

你可能感兴趣的:(Vue 实现左边导航栏且右边显示具体内容(element-ui))