layout 实现侧边栏菜单布局回顾

使用layout实现侧边栏菜单

 router.js
  {
   path:'/Layout',
    name: 'Layout',
    component: ()=>import('@/views/layout/index'),
    redirect:'/practice',
    children:[
      {
        path: '/practice',
        name: 'practice',
        component: ()=>import('@/views/layout/components/practice'),
      },
      {
        path: '/HelloWorld',
        name: 'HelloWorld',
        component: ()=>import('@/views/layout/components/HelloWorld'),
      },
      {
        path: '/viewpac',
        name: 'viewpac',
        component: ()=>import('@/views/layout/components/viewpac'),
      }

    ]
  }

layout.vue
当点击Nav中的每一个菜单时，会在当前layout中查找router-view,这里使用AppMain组件，方便后期高度灵活封装
  如果没有<AppMain/> 组件，菜单对应的main部分则不能展示，即使路由跳转成功了.当做组件引入的，会在当前页面查找router-view
    点击 路由跳转则会查找App.vue中的router-view
<template>
  <el-container>
   <el-aside>
       <Nav/>
   </el-aside>
    <el-main>
      <AppMain/>
    </el-main>
  </el-container>
<router-link to="/Graph-three">路由跳转</router-link>
</template>

<script>
import Nav from '@/views/layout/components/nav'
import AppMain from '@/views/layout/components/AppMain'
export default {
  name: 'index',
  components:{
    Nav,
    AppMain
  }
}
</script>

<style scoped>
.el-aside{
  height: 100vh;
}
</style>

Nav.vue
<template>
<el-menu class="el-menu-vertical-demo"
         background-color="#545c64"
         text-color="#fff"
         active-text-color="#ffd04b"
         :unique-opened='true'
         router>
  <el-submenu index="1">
    <!--定义菜单标题-->
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>导航一</span>
    </template>
     <el-menu-item-group>
       <el-menu-item>
         <router-link to="/practice" key="1">练习</router-link>
       </el-menu-item>
       <el-menu-item>
         <router-link to="/HelloWorld" key="2">欢迎</router-link>
       </el-menu-item>
      <!--由于开启了路由模式,index可以直接写路由路径-->
       <el-menu-item index="/viewpac">
         viewpac组件
       </el-menu-item>
     </el-menu-item-group>
  </el-submenu>
</el-menu>
</template>

<script>
export default {
  name: 'nav.vue'
}
</script>

<style scoped>
.el-menu{
  height: 100%;
}
</style>

AppMain.vue
<template>
 <div>
  <router-view/>
 </div>
</template>

<script>
export default {
  name: 'AppMain'
}
</script>

<style scoped>

</style>

最终效果