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

本文实例为大家分享了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>

效果图：

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