vue在有菜单的情况下，创建一个某页面内的菜单

最新推荐文章于 2024-05-27 13:45:13 发布

lu123ying

最新推荐文章于 2024-05-27 13:45:13 发布

阅读量711

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lu123ying/article/details/127082948

版权

场景：本系统有一个整体的菜单，但是一个模块的需求是：需要在这个模块首页再加一个菜单。
代码：
在路由中加入一级菜单及所有的二级菜单

{
    path: '/xfj',
    component: () => import('@/views/xfj/xfjIndex'),
    hidden: true,
    children:[
      {
        path: 'xfjxz',
        component: () => import('@/views/xfj/xfxz'),
        name: 'xfjxz',
        meta: { title: 'xf须知', icon: 'dashboard', affix: true }
      },
      {
        path: 'wyxf',
        component: () => import('@/views/xfj/wyxf'),
        name: 'wyxf',
        meta: { title: '我要xf', icon: 'dashboard', affix: true }
      },
      {
        path: 'cxmSearch',
        component: () => import('@/views/xfj/cxmSearch'),
        name: 'cxmSearch',
        meta: { title: 'xfcx', icon: 'dashboard', affix: true }
      },
    ]
  },

xfjIndex.vue中

<xfj-aside></xfj-aside>
<router-view></router-view>

xfjAside.vue中,要在el-menu中加入

router
:default-active="$route.path"

index中加入对应路由

<el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#3582c4"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item index="/xfj/xfjxz">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title">xf须知</span>
          </el-menu-item>
          <el-menu-item index="/xfj/wyxf">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title">我要xf</span>
          </el-menu-item>
          <el-menu-item index="/xfj/cxmSearch">
            <!-- <i class="el-icon-document"></i> -->
            <span slot="title">xf查询</span>
          </el-menu-item>
        </el-menu>