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