本文实例为大家分享了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>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
vue.js左边导航切换 vue.js导航切换内容 vue.js导航切换x