后台管理系统实现多级菜单路由

最新推荐文章于 2024-03-27 16:53:50 发布

mwsblue

最新推荐文章于 2024-03-27 16:53:50 发布

阅读量1.1k

点赞数

分类专栏：实战总结文章标签： vue.js node.js javascript css html

本文链接：https://blog.csdn.net/mwsblue/article/details/114631166

版权

在Vue.js中创建后台管理系统时，通常会设计一个包含左侧菜单和右侧主要内容的固定布局。本文介绍了如何实现这种布局，特别是如何处理多级菜单路由。通过设置hidden属性控制菜单是否显示，以及alwaysShow属性确保在只有一个子路由的情况下仍能显示父级菜单。

摘要由CSDN通过智能技术生成

在vue实现后台管理系统时一般都有一个固定的界面布局，往往都会有左侧sider为菜单路由，右侧分header信息和main内容的展示。下面是一种比较常见的后台系统布局。

结构：
在这里插入图片描述

1、layout第一层路由视图

<template>
  <el-container class="app-container">
    <el-aside class="app-aside" :width="isCollapse?'60px':'200px'">
      <router-link to="/" class="aside-title">
        <img src="@/assets/logo.png" alt="">
        <span v-if="!isCollapse" style="padding-left:10px;">项目名称</span>
      </router-link>
      <side-bar :isCollapse="isCollapse"></side-bar>
    </el-aside>
    <el-container style="min-width:1200px;">
      <el-header class="app-header">
        <nav-bar></nav