vue动态路由+侧边栏菜单之侧边栏菜单

直接放我侧边栏组件代码,相关代码在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]

评论

  1. Windows Chrome 90.0.4430.212
    1年前
    2021-5-20 11:07:59

    v-for 和 v-if 公用会不会执行效率减慢呢

    • loneking
      博主
      3349547246
      Windows Chrome 90.0.4430.212
      1年前
      2021-5-21 15:21:03

      v-for里套了v-if肯定不如单纯的v-for快,
      可以将v-for要遍历的数据,提前filter方法过滤一下也行

  2. Windows Chrome 87.0.4280.66
    2年前
    2020-12-18 17:31:11

    谢谢分享

  3. chengl
    Windows Chrome 87.0.4280.88
    2年前
    2020-12-17 19:49:22

    mark

  4. Windows Chrome 87.0.4280.88
    2年前
    2020-12-17 10:34:39

    谢谢分享,非常感谢

  5. Ice
    Windows Chrome 87.0.4280.88
    2年前
    2020-12-17 9:28:06

    太棒了,这网站做的也很不错

  6. michael
    Windows Edge 87.0.664.57
    2年前
    2020-12-12 15:12:54

    谢谢分享

  7. michael
    Windows Edge 87.0.664.57
    2年前
    2020-12-12 15:12:24

    谢谢,学习下

  8. Windows Firefox 83.0
    2年前
    2020-11-28 19:37:12

    感谢

  9. Windows Chrome 81.0.4044.113
    2年前
    2020-11-27 11:10:04

    谢谢分享

  10. Windows Chrome 86.0.4240.183
    2年前
    2020-11-06 22:15:26

    谢谢分享

  11. haha
    Macintosh Chrome 86.0.4240.111
    2年前
    2020-11-05 22:15:07

    看看!!!

  12. df
    Windows Chrome 85.0.4183.121
    2年前
    2020-9-27 23:13:04

    谢谢分享

  13. 杨超越的小可爱
    Windows Chrome 85.0.4183.83
    2年前
    2020-9-09 9:55:30

    多谢多谢

  14. 温某人
    Windows Chrome 84.0.4147.125
    2年前
    2020-8-27 14:03:45

    多谢

  15. lier
    Windows Chrome 69.0.3497.100
    2年前
    2020-8-21 17:41:48

    谢谢分享

  16. Windows Chrome 69.0.3497.100
    2年前
    2020-8-21 17:38:22

    详细看看

  17. liangzq
    Windows Chrome 78.0.3904.108
    2年前
    2020-7-28 14:06:25

    写的不错

  18. 匿名
    Windows Chrome 84.0.4147.89
    2年前
    2020-7-18 20:49:46

    谢谢分享了

  19. loneking
    博主
    Windows Chrome 83.0.4103.116
    2年前
    2020-7-18 18:10:25

    谢谢分享了。

  20. ahh
    Windows Chrome 74.0.3729.169
    2年前
    2020-7-14 9:29:48

    不错不错

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇