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

2019-9-05 16:16

Web

205 字

7 分钟

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