layout布局导航菜单

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/test',
      children: [
        {
          path: 'test',
          name: 'test',
          component: () => import('@/view/test'),
          meta: { title: '首页', icon: 'home' }
        }
      ]
    },

    {
      path: '/s',
      component: Layout,
      redirect: '/s/map',
      meta: { title: '其他', icon: 'home' },
      children: [
        {
          path: 'map',
          name: 'map',
          component: () => import('@/components/map'),
          meta: { title: '地图', icon: 'home' },
        },
        {
          path: 'gojs',
          name: 'gojs',
          component: () => import('@/view/gojs'),
          meta: { title: 'go', icon: 'home' },
        },
      ]
    },
    {
      path: '/home',
      component: Layout,
      redirect: '/home/homes',
      children:[
        {
          path:'homes',
          name:'homes',
          component: () => import('@/view/home'),
          meta: { title: '图表', icon: 'home' }
        }
      ]
    },
  ],
  mode: "history"    //去掉/#/
})

 

children 里面的path 应该要加上父级的路径 ，这里没加 后面统一拼上了

Menu组件

<template>
  <Menu theme="dark" accordion width='220px'>
    <Item v-for="route in routes" :key="route.path" :item="route"></Item>
  </Menu>
</template>
<script>
import Item from './item.vue'
export default {
  name: 'm',
  components:{
    Item
  },
  computed: {
    routes() {
      return this.$router.options.routes
    },
  },
  created() {
    console.log('menu',this.$router.options.routes)
  },
  methods: {

  }
}
</script>

<style scoped>
</style>

Item组件

<template>
  <div>
    <MenuItem v-if="hasOneChild(item)" :to="item.path" :name="item.path">
      <Icon type="ios-paper" /><span>{{item.children[0].meta.title}}</span>
    </MenuItem>
    <template v-else>
        <Submenu :name="item.path">
          <template slot="title">
            <Icon type="ios-apps" /><span>{{item.meta.title}}</span>
          </template>  
          <MenuItem  v-for="items in item.children" :key="items.path" :to="resolvePath(item.path,items.path)" :name="resolvePath(item.path,items.path)">
            <Icon type="ios-paper" /><span>{{items.meta.title}}</span>
          </MenuItem>
        </Submenu> 
    </template>

  </div>

</template>
<script>
import path from 'path'
export default {
  name: 'item',
  computed: {

  },
  props:{
    item:{
      type:Object,
      required:true
    }
  },

  created() {
    console.log('item',this.item)
  },
  methods: {
    // 如果children 里面只有一个 就按照单个显示  如果里面有1个以上就按组折叠显示
    hasOneChild(item){
      if(item.children && item.children.length==1){
        return true
      }else{
        return false
      }
    },
    // chilidren 里面的路径 拼上父级路径
    resolvePath(base,routePath){
       return path.resolve(base, routePath)
    }
  }
}
</script>

<style scoped>
</style>