vue实现侧边栏导航效果


Posted in Javascript onOctober 21, 2019

本文实例为大家分享了vue侧边栏导航的具体代码,供大家参考,具体内容如下

最终效果

vue实现侧边栏导航效果

vue实现侧边栏导航效果

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

vue实现侧边栏导航效果

实现代码

1.下载vue-router

npm install vue-router --save-dev

2.在main.js中引入

import Vue from 'vue'
import Router from 'vue-router' 
Vue.use(Router) // 引入路由

3.在components中新建组件

3.1 agencySearch.vue组件

代码:

<template>
 <div>
  直属下线代理查询
 </div>
</template>

3.2 agencySet.vue组件

代码

<template>
 <div>
  直属下线代理设置
 </div>
</template>

3.3 financialIncome.vue组件

代码

<template>
 <div>
  财务收益数据报表
 </div>
</template>

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

//4.1引入组件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' // 主页
import agencySearch from '@/components/agencySearch' // 直属下线代理查询
import agencySet from '@/components/agencySet' // 直属下线代理设置
Vue.use(Router)
//搭配路由
export default new Router({
 mode: 'history',
 scrollBehavior: () => ({
 y: 0
 }),
 routes: [
 {
  // 主页
  path: '/',
  component: Home,
  name: '代理事物',
  iconCls: 'el-icon-message',
  children: [{
  path: '/agencySearch',
  component: agencySearch,
  name: '直属下线代理查询',
  hidden: true
  },
  {
  path: '/agencySet',
  component: agencySet,
  name: '直属下线代理设置'
  }]
 },
 {
  // 主页
  path: '/',
  component: Home,
  name: '财务报表',
  iconCls: 'el-icon-menu',
  children: [{
  path: '/financialIncome',
  component: financialIncome,
  name: '财务收益数据报表',
  hidden: true
  }]
 }]
})

5.在主页Home组件中搭配导航以及路由出口

在el-menu标签中一定要有 unique-opened 和 router属性,在el-menu-item中index属性值等于在router下index.js中配好的路由名字

这个是从element官网截取的

vue实现侧边栏导航效果

vue实现侧边栏导航效果

<el-row class="tac">
 <el-col :span="24">
 <el-menu
  default-active="1"
  class="el-menu-vertical-demo"
  unique-opened 
  router>
  <el-submenu index="1">
  <template slot="title">
   <i class="el-icon-message"></i>
   <span>代理事务</span>
  </template>
  <el-menu-item-group>
  <template slot="title"></template>
  <el-menu-item index="/agencySearch">直属下线代理查询</el-menu-item>
  <el-menu-item index="/agencySet">直属下线代理设置</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  <el-submenu index="2">
  <template slot="title">
   <i class="el-icon-menu"></i>
   <span>财务报表</span>
  </template>
  <el-menu-item-group>
  <template slot="title"></template>
  <el-menu-item index="/financialIncome">财务收益数据报表</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
 </el-menu>
 </el-col>
</el-row>

路由出口-右侧显示部分

<el-col :span="24" class="content-wrapper">
 <transition name="fade" mode="out-in">
  <router-view></router-view>
 </transition>
 </el-col>

结语:因为是从写好的代码中截取的一部分,可能跑不起来,请见谅,我能理解的原理部分都写在这里啦。

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
vue实现全选和反选功能
Aug 31 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 #Javascript
关于Vue中axios的封装实例详解
Oct 20 #Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 #Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 #Javascript
vue实现二级导航栏效果
Oct 19 #Javascript
vue.js实现二级菜单效果
Oct 19 #Javascript
You might like
开发大型PHP项目的方法
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
cmd下运行php脚本
2008/11/25 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
Element Input组件分析小结
2018/10/11 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中list初始化方法示例
2016/09/18 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
技术人员面试提纲
2013/11/28 职场文书
采购员的工作职责
2013/12/26 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
军人违纪检讨书
2014/02/04 职场文书
职工运动会感言
2014/02/07 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
人民调解协议书范本
2014/10/11 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL