vue实现侧边栏导航效果

本文实例为大家分享了某视频剪辑软件侧边栏导航的具体代码，供大家参考，具体内容如下

最终效果

点击下一个导航，上一个导航自动收回

实现代码

1.下载某视频剪辑软件路由器

新公共管理安装vue-路由器-保存-dev2 .在main.js中引入

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器Vue。使用(路由器)//引入路由3.在成分中新建组件

3.1 agencySearch.vue组件

代码：

模板差异直属下线代理查询/div/template3.2 agencySet.vue组件

代码

模板差异直属下线代理设置/div/模板3.3财务收入。某视频剪辑软件组件

代码

模板差异财务收益数据报表/div/template4 .在路由器下的index.js中引入组件，搭配路由

//4.1引入组件从“vue”导入某视频剪辑软件从“vue路由器”导入路由器从" @/组件/主页"//导入主页主页从" @/components/agencySearch"//导入Agency SEarch直属下线代理查询从" @/组件/代理SEt"//导入agencySet直属下线代理设置Vue.use(路由器)//搭配路由导出默认的新路由器({ mode: 'history '，滚动行为：()=({ y : 0 })，路由器： [ { //主页路径： '/',组件：主页，名称： '代理事物，iconcl : ' El-icon-message '，children :[{ path : '/Agency SEarch '，component: agencySearch，name: '直属下线代理查询，hidden: true }，{ path: '/agencySet '，component: agencySet，name: '直属下线代理设置' }] }, { //主页路径： '/',组件：主页，名称： '财务报表，iconcl : ' El-icon-menu '，children :[{ path : '/financial income '，component: financialIncome，name: '财务收益数据报表，hidden: true }] }]})5 .在主页主页组件中搭配导航以及路由出口

在埃尔菜单标签中一定要有唯一打开的和路由器属性，在埃尔菜单项中指数属性值等于在路由器下index.js中配好的路由名字

这个是从元素官网截取的

El-row class=' tac ' El-col : span=' 24 ' El-菜单默认-活动=' 1 ' class=' El-菜单-垂直-演示'唯一-打开的路由器埃尔-子菜单索引=' 1 '模板插槽=' title ' I class=' El-icon-message '/I span代理事务/span/模板埃尔-菜单项-组模板slot=' title '/模板埃尔-菜单项索引='/agencySearch '直属下线代理查询/El-菜单项El-菜单项索引='/Agency SEt '直属下线代理设置/El-菜单项/El-菜单项-组/El-子菜单埃尔-子菜单索引='2 '模板槽=' title ' I class=' El-icon-menu '/I span财务报表/span/模板埃尔-菜单项-组模板slot=' title '/模板埃尔-菜单项索引='/financialIncome '财务收益数据报表/El-菜单项/El-菜单项-组/El-子菜单/El-菜单/El-列/El-行路由出口-右侧显示部分

El-col : span=' 24 ' class=' content-wrapper '转换名称=“淡入淡出”模式=“淡入淡出”路由器-视图/路由器-视图/转换/埃尔-科尔结语：因为是从写好的代码中截取的一部分，可能跑不起来，请见谅，我能理解的原理部分都写在这里啦。

更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。