直接放我侧边栏组件代码,相关代码在vue动态路由+侧边栏菜单之动态路由
参考略作修改即可
新建目录Sidebar
Sidebar->index.vue
<template>
<scroll-bar>
<el-menu mode="vertical" router unique-opened :default-active="$route.path" :collapse="isCollapse"
background-color="#304156" text-color="#fff" active-text-color="#409EFF"
@select="handleSelect">
<sidebar-item :menus="menus"></sidebar-item>
</el-menu>
</scroll-bar>
</template>
<script>
import {mapGetters} from 'vuex'
import SidebarItem from './SidebarItem'
import ScrollBar from '@/components/ScrollBar'
export default {
components: {SidebarItem, ScrollBar},
computed: {
...mapGetters([
'sidebar',
'menus'
]),
isCollapse() {
return !this.sidebar.opened
}
},
methods: {
handleSelect: function (key, keyPath) {
// console.log('select',key,keyPath)
}
}
}
</script>
Sidebar->SidebarItem.vue
<template>
<div class="menu-wrapper">
<template v-for="item in menus" v-if="menus.length>0">
<el-submenu :index="item.Url" :key="item.Id">
<template slot="title">
<!-- <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>-->
<span v-if="item.Name">{{item.Name}}</span>
</template>
<template v-for="child in item.Children" >
<sidebar-item class="nest-menu" v-if="child.Children&&child.Children.length>0"
:key="child.Url"></sidebar-item>
<el-menu-item :index="child.Url" v-else :key="child.Url">
<span v-if="child.Name">{{child.Name}}</span>
</el-menu-item>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
menus: {
type: Array
}
},
created() {
}
}
</script>
Layout.vue代码
<template>
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
<sidebar class="sidebar-container"></sidebar>
<div class="main-container">
<navbar></navbar>
<app-main></app-main>
</div>
</div>
</template>
<script>
import { Navbar, Sidebar, AppMain } from '@/views/layout/components'
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
computed: {
sidebar() {
return this.$store.state.app.sidebar
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
}
</style>
AppMain.vue代码,其中
<router-view :key="$route.name + ($route.params.id || '')"></router-view>很重要, 如果URL相同,但是参数不相同的时候,是不会刷新页面的,这样将key设置为name+param就避免这种情况的, 会再发布个文章单独说这块。
<template>
<section class="app-main">
<transition name="fade" mode="out-in">
<router-view :key="$route.name + ($route.params.id || '')"></router-view>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
}
}
</script>
相关代码打包
[reply2down]http://down.lkcloud.top/BlogFile/tabview.zip[/reply2down]
v-for 和 v-if 公用会不会执行效率减慢呢
v-for里套了v-if肯定不如单纯的v-for快,
可以将v-for要遍历的数据,提前filter方法过滤一下也行
谢谢分享
mark
谢谢分享,非常感谢
太棒了,这网站做的也很不错
谢谢分享
谢谢,学习下
感谢
谢谢分享
谢谢分享
看看!!!
谢谢分享
多谢多谢
多谢
谢谢分享
详细看看
写的不错
谢谢分享了
谢谢分享了。
不错不错