vue 右边跳转 实现左侧栏_vue.js实现左边导航切换右边内容

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

• {{item.name}}

  • @click="tabSecond(itemT)">

    {{itemT.name}}

扫一扫下载APP

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

}

}

})

}

}

}

@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;

}

效果图：

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