2023-7-21

Aplicar componentes padre-hijo para generar un menú de árbol

Barra lateral.vue

• En la etiqueta de plantilla

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

• Importar menú de árbol

import TreeMenu from "@/views/TreeMenu";

• Registrarse ÁrbolMenú

  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>

El componente principal (SideBar) pasa parámetros al componente secundario (TreeMenu)

• barra lateral

•  ÁrbolMenú

 Saltar inicio de sesión

Interfaz de inicio de sesión a la interfaz principal

• Saltar después de que la contraseña coincida correctamente en Login.vue

•  Configurar el enrutamiento en 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

• Efecto

 

Mostrar el contenido del menú secundario

• Crear los componentes correspondientes del menú secundario.

•  Añadir a subrutas (hijos)

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

• Efecto