vue.js实现左边导航切换右边内容


Posted in Javascript onOctober 21, 2019

本文实例为大家分享了vue.js左边导航切换右边内容的具体代码,供大家参考,具体内容如下

<template>
 <div class="layout-container">
 <y-header>
 <div slot="nav"></div>
 </y-header>
 <div class="w">
 <div class="content">
 <div class="account-sidebar">
  <div class="gray-box ">
  <div class="box-inner">
  <ul class="account-nav">
  <li v-for="(item,i) in nav" :key='i'>
   <a href="javascript:;" >
   <div class="account-nav-primary" @click="tabPrimary(item)" :class="{active:item.isActive}">
    <span>{{item.name}}</span>
    <i class="el-icon-arrow-right"></i>
   </div>
   </a>
   <div v-if="item.secondNav==true">
    <ul class="account-nav-second" v-show="show">
    <li v-for="(itemT,j) in item.navSecond" :key='j' :class="{active:itemT.name===title}"
     @click="tabSecond(itemT)">
     <span>{{itemT.name}}</span>
    </li>
    </ul>
   </div>
  </li>
  </ul>
  </div>
  </div>
  <div class="gray-box sidebar-bottom content-center">
  <div class="img-code">
   <img src="../../assets/static/img-code.png" width="100"/>
  </div>
  <span>扫一扫下载APP</span>
  </div>
 </div>
 <div class="account-content">
  <router-view></router-view>
 </div>
 </div>
 </div>
 <y-footer></y-footer>
 </div>
</template>
<script>
 import YFooter from '/common/footer'
 import YHeader from '/common/header'
 
 export default {
 data () {
 return {
 show: true,
 title: '学院介绍',
 nav: [
  {name: '学院介绍',
  isActive: false,
  secondNav: true, // 是否存在二级菜单,true为存在
  // path: 'background',
  navSecond: [
  {name: '创建背景', path: 'background'},
  {name: '创建单位', path: 'unit'},
  {name: '创建目的'},
  {name: '管理单位'},
  {name: '运行主体'}
  ]
  },
  {name: '关于我们', path: 'aboutMe', isActive: false, secondNav: false}
 ]
 }
 },
 computed: {
 },
 methods: {
 tabSecond (e) {
 this.$router.push({path: '/college/' + e.path})
 },
 tabPrimary (e) {
 let path = this.$route.path.split('/')[2]
 if (e.secondNav) {
 // this.show = !this.show
  if (path === 'aboutMe') {
  this.$router.push({path: '/college/' + e.navSecond[0].path})
  }
 } else {
  this.$router.push({path: '/college/' + e.path})
 }
 }
 },
 created () {
 let path = this.$route.path.split('/')[2]
 this.nav.forEach(item => {
 item.isActive = false
 if (item.secondNav) {
  item.navSecond.forEach(itemT => {
  if (itemT.path === path) {
  this.title = itemT.name
  if (itemT.name === this.title) {
  item.isActive = true // 当属于子菜单时,父菜单高亮
  }
  }
  })
 } else {
  if (item.path === path) {
  this.title = item.name
  item.isActive = true
  }
 }
 })
 },
 components: {
 YFooter,
 YHeader
 },
 watch: {
 $route (to) {
 let path = to.path.split('/')[2]
 this.nav.forEach(item => {
  item.isActive = false
  if (item.secondNav) {
  item.navSecond.forEach(itemT => {
  if (itemT.path === path) {
  this.title = itemT.name
  if (itemT.name === this.title) {
   item.isActive = true // 当属于子菜单时,父菜单高亮
  }
  }
  })
  } else {
  if (item.path === path) {
  this.title = item.name
  item.isActive = true
  }
  }
 })
 }
 }
 }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
 @import "../../assets/style/mixin";
 .main {
 background: #fff;
 color: #000;
 }
 a {
 color: #000;
 }
 .w {
 padding-top: 40px;
 }
 .img-code {
 margin: 0px auto 12px;
 }
 .content {
 display: flex;
 height: 100%;
 font-size: 16px;
 }
 .sidebar-bottom {
 margin-top: 20px;
 padding: 16px;
 }
 .content-center {
 text-align: center;
 }
 .account-sidebar {
 width: 210px;
 border-radius: 6px;
 .account-nav {
 padding: 15px 0;
 .active {
  color: #0156AC;
 }
 .active a{
  color: #0156AC;
 }
 li:hover {
  a{
  color: #0156AC;
  }
 }
 li {
 position: relative;
 line-height: 48px;
 .account-nav-primary {
  padding: 0px 20px;
  height: 48px;
  span {
  float: left;
  }
  i {
  float: right;
  line-height: 48px;
  font-size: 14px;
  }
 }
 .account-nav-second {
  li {
  list-style: disc;
  list-style-position: inside;
  height: 48px;
  padding: 0 26px;
  text-align: left;
  color: #5B6976;
  cursor: pointer;
  span {
   margin-left: -14px;
   color: #A9B2BC;
  }
  &:hover{
   color: #0156AC;
   span {
   color: #0156AC;
   }
  }
  }
  .active {
  color: #0156AC;
  span {
   color: #0156AC;
  }
  }
 }
 a {
  display: block;
 }
 &.current {
  a {
  position: relative;
  z-index: 1;
  height: 50px;
  background-color: #98AFEE;
  line-height: 50px;
  color: #FFF;
  }
 }
 }
 }
 }
 .account-content {
 margin-left: 24px;
 flex: 1;
 }
</style>

效果图:

vue.js实现左边导航切换右边内容

vue.js实现左边导航切换右边内容

vue.js实现左边导航切换右边内容

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

Javascript 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
vue实现侧边栏导航效果
Oct 21 #Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 #Javascript
关于Vue中axios的封装实例详解
Oct 20 #Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
东方红 - 来复式再生机的修复
2021/03/02 无线电
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php获取随机数组列表的方法
2014/11/13 PHP
WordPress网站性能优化指南
2015/11/18 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
python得到windows自启动列表的方法
2018/10/14 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
使用python模拟高斯分布例子
2019/12/09 Python
用python写PDF转换器的实现
2020/10/29 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
zooplus意大利:在线宠物商店
2019/08/07 全球购物
数组越界问题
2015/10/21 面试题
幼儿园毕业教师感言
2014/02/21 职场文书
元旦晚会感言
2014/03/12 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
教师理论学习心得体会
2016/01/21 职场文书
python基础之类方法和静态方法
2021/10/24 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android