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 相关文章推荐
web css实现整站样式互相切换
Oct 29 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
javascript表单验证大全
Aug 12 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php实现图片缩略图的方法
2016/03/29 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
一份python入门应该看的学习资料
2018/04/11 Python
numpy中矩阵合并的实例
2018/06/15 Python
Python魔法方法详解
2019/02/13 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
《哪吒闹海》教学反思
2014/02/28 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
电力安全学习心得体会
2016/01/18 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
总结Python变量的相关知识
2021/06/28 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL