2023-7-21

应用父子组件生成树形菜单

SideBar.vue

• template标签中

<div class="sideBar">
  <ul class="menu" v-for="menu in menus">
    <TreeMenu :menu="menu"></TreeMenu>
  </ul>
</div>

• 导入TreeMenu

import TreeMenu from "@/views/TreeMenu";

• 注册TreeMenu

  components:{
    TreeMenu
  },

TreeMenu.vue

<template>
  <li>
    <!-- 没有子菜单，例如，首页-->
    <router-link v-if="menu.url!='null'" :to="menu.url"><i :class="menu.icon"></i>{{menu.permissionName}}</router-link>
    <!-- 有子菜单，通过click展开 -->
    <a :href="menu.url" v-else @click.prevent="isExpand=!isExpand"><i :class="menu.icon"></i>&nbsp;&nbsp;{{ menu.permissionName }}</a>

      <ul class="submenu" v-show="isExpand" >
        <tree-menu v-if="menu.childPermission.length!=0"
                   :menu="childMenu"
                   v-for="childMenu in menu.childPermission"></tree-menu>
      </ul>
  </li>
</template>

<script>
export default {
  name: "TreeMenu",
  props: ['menu'],
  data(){
    return{
      isExpand: false
    }
  }
}
</script>

<style scoped>

</style>

父组件(SideBar)给子组件(TreeMenu)传参数

• SideBar

•  TreeMenu

 登录跳转

登录界面到主界面

• Login.vue中密码匹配成功后跳转

•  index.js中配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/views/Login";
import Index from "@/views/Index"
import UserList from "@/components/UserList";
import Home from "@/views/Home";
import RoleList from "@/components/RoleList";

Vue.use(VueRouter)

const routes = [
  {
    //默认界面
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/index',
    name: 'index',
    component: Index,
  },
]
const router = new VueRouter({
  routes
})
export default router

• 效果

 

展现二级菜单的内容

• 创建二级菜单相应的组件

•  加到子路由（children）中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/views/Login";
import Index from "@/views/Index"
import UserList from "@/components/UserList";
import Home from "@/views/Home";
import RoleList from "@/components/RoleList";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/index',
    name: 'index',
    component: Index,
    children: [
      {
        path: '/home',
        name: 'home',
        component: Home
      },
      {
        path: '/roleList',
        name: 'roleList',
        component: RoleList
      },
    ]
  },
]
const router = new VueRouter({
  routes
})
export default router

• 效果