vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转

这篇具有很好参考价值的文章主要介绍了vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一. 先在router.js文件中配置路由,将侧边栏中需要跳转的页面都添加到children中

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/project",
      name: "projectGroup",
      meta: {
        requiresAuth: true,
        title: "项目列表",
        navBreadcrumb: [
          { label: "项目列表", name: "projectSample", link: true },
        ],
      },
      component: () => import("../views/project/Index.vue"),
      children: [
        {
          path: "sample/:id",
          name: "projectGroup:sample",
          meta: {
            requiresAuth: true,
            title: "项目列表",
            navBreadcrumb: [
              { label: "项目列表", name: "projectSample", link: true },
            ],
          },
          component: () => import("../views/project/Sample.vue"),
        },
        {
          path: "alg/:id",
          name: "projectGroup:alg",
          meta: {
            requiresAuth: true,
            title: "项目列表",
            navBreadcrumb: [
              { label: "项目列表", name: "projectSample", link: true },
            ],
          },
          component: () => import("../views/project/Alg.vue"),
        },
      ],
    },
  ],
});

二. 在view目录下新建一个文件,里面包含侧边栏要跳转的页面

elementplus侧边栏路由,vue.js,javascript,前端

三.  页面样式布局

1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示

<template>
  <el-config-provider namespace="ep" :locale="zhCn">
//BaseHeader是我自己的定义的组件,为当前页面的头部
    <div class="top-header">
      <BaseHeader />
      <div>
        <user-avatar />
      </div>
    </div>
    <div class="app-main" v-if="userInfo !== null">
//BaseSide 自定义组件,为当前页面的侧边栏
      <div class="base-side-main" v-if="props.hasBaseSide"><BaseSide /></div>
      <div
        :class="['content-main', mainClass]"
        :style="{ left: props.hasBaseSide ? '64px' : '0' }"
      >
        <slot></slot>
      </div>
    </div>
  </el-config-provider>
</template>

也可以使用element plus中的Container 布局容器 

elementplus侧边栏路由,vue.js,javascript,前端

 2. BaseHeader.vue文件里面为页面头部样式,头部样式相对简单

<template>
  <div class="top-nav-bar">
    <div class="app-title">
      <router-link :to="{ name: 'home' }"> 病理图像AI自训练中台 </router-link
      ><el-tag
        effect="dark"
        type="danger"
        style="margin-left: 10px"
        v-if="envMode === 'test'"
      >
        测试版
      </el-tag>
    </div>
    <el-menu
      class="el-menu-bar"
      mode="horizontal"
      :ellipsis="false"
      :defaultActive="menuActive"
    >
      <el-menu-item index="3" @click="goPage('/dashboard')"
        >控制台</el-menu-item
      >
      <el-menu-item index="1" @click="goPage('/alg')">我的算法</el-menu-item>
      <el-menu-item index="2" @click="goPage('/market')">应用市场</el-menu-item>
      <el-menu-item index="4" @click="goPage('/project')"
        >项目列表</el-menu-item
      >
    </el-menu>
  </div>
</template>

3. BaseSide.vue文件里面是侧边栏样式,这里是重点!!!这里进行页面路由跳转设置

<template>
  <el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <div v-for="i in listProject?.ListProjectByTenant" :key="i.id">
//因为我的侧边栏数据是需要动态获取的,所以这里的index不能相同,否则几个侧边栏会同时展开时
      <el-sub-menu :index="i">
        <template #title>{{ i.name }}</template>
        <el-menu-item index="alg">
//这里使用<router-link>,通过属性to来进行跳转,里面的name就是刚才在router.js文件中设置的,params这里包含的是路由跳转时传递的参数
          <router-link
            :to="{
              name: 'projectGroup:alg',
              params: { id: i.id, name: i.name },
            }"
            >算法</router-link
          >
        </el-menu-item>
        <el-menu-item index="sample"
          ><router-link
            :to="{
              name: 'projectGroup:sample',
              params: { id: i.id, name: i.name },
            }"
            >样本</router-link
          ></el-menu-item
        >
      </el-sub-menu>
    </div>
  </el-menu>
</template>

四. index.vue文件中引入刚才的组件

<template>
//因为我的数据是动态获取,所以要先判断一下是否有数据,有数据再显示侧边栏
  <BaseLayout :hasBaseSide="isProjectLoaded && projectListData.length">
    <PaddingLayout>
      <el-card class="table-card" shadow="never">
        <router-view></router-view>
      </el-card>
    </PaddingLayout>
  </AlgProjectLayout>
</template>

样式如下:

elementplus侧边栏路由,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-546377.html

到了这里,关于vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 + Element Plus 实现动态标签页及右键菜单

    目录 先上图  使用el-dropdown绑定右键菜单,为每个tab页绑定一个右键 右键菜单生效后控制每个下拉项的禁用与显示(每一项代表一个功能) 每个右键项对应的功能  控制每次只显示一个右键 完整代码         只有首页的情况         多个tab页的情况  

    2024年02月07日
    浏览(46)
  • Vue3后台管理系统Element-plus_侧边栏制作_无限递归

    在home.view中添加代码  2 创建一个全局组件  效果如图

    2024年02月09日
    浏览(38)
  • vue3+element Plus实现弹框的拖拽、可点击底层页面功能

     1、template部分 必须加的属性         modal:是否去掉遮罩层         close-on-click-modal:是否可以通过点击modal关闭Dialog         draggable:开启拖拽功能 2、css部分 网上查找的资料,css需要修改pointer-events,主要的作用是 设置元素是否对鼠标事件做出反应   因为 .el-overlay-dialog的父

    2024年02月05日
    浏览(63)
  • 【Vue3 博物馆管理系统】使用Vue3、Element-plus菜单组件构建前台用户菜单

    第一章 定制上中下(顶部菜单、底部区域、中间主区域显示)三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 [第三章 使用Vue3、Element-plus菜单组件构建轮播图] [第四章 使用Vue3、Element-plus菜单组件构建组图文章] 上一章节给我们把博物馆管理系统打了个地基,基本

    2024年02月13日
    浏览(60)
  • vue3 element-plus动态菜单及动态图标

    引入element-plus 注册图标组件 动态引入图标代码 完整代码 路由如下

    2024年01月18日
    浏览(45)
  • Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能 三一

    1.1 头部是一个面包屑 (Breadcrumb)导航区域 1.2 白色区域是一个卡片(Card)视图 1.3 卡片 (Card)视图中嵌套了   输入框(Input )、 按钮(Button)、 表单(Form)、分页(Pagination ) Breadcrumb 面包屑 | Element Plus (gitee.io) https://element-plus.gitee.io/zh-CN/component/breadcrumb.html  2.1.1 复制

    2023年04月09日
    浏览(55)
  • vue3后台管理系统实现动态侧边导航菜单管理(ElementPlus组件)

    记住 一级(el-sub-menu)的都是只是展示的 点击跳转的都是一级下的子级(el-menu-item) 完整展示 1:在登陆功能进行登陆 获取menu列表 注册路由表的时候 把文件进行创建好 因为注册的方法需要获取这个路径 整个router下的main product等等都要创建 2:侧边菜单界面 router/index.ts

    2024年02月16日
    浏览(54)
  • Vue3+element-plus 后台管理系统(含登陆注册功能页面)

    最近在学习Vue3,记录一下自己从0开始搭建后台框架,并获取远程接口数据对页面的渲染 本次功能实现主要包括:连接后端的远程接口数据进行登录注册功能实现 : 1.本次登陆注册合并为了一个页面,页面都使用了element-plus中的组件渲染,更加美观 2.用route路由实现不同页面逻辑跳

    2023年04月26日
    浏览(54)
  • vue3+elementui-plus实现无限递归菜单

    效果图 实现方式是:通过给定的数据结构层数来动态生成多级菜单 下面的方法可以实现重置菜单选项为默认项(需求场景:左侧菜单切换时,上方菜单就要重置为默认选项) 通过给el-menu添加:key=\\\"menuKey\\\"实现。 实现原理::key=“menuKey” 是 Vue 中的一个特殊语法,用于控制组件

    2024年04月24日
    浏览(37)
  • element ui NavMenu 实现侧边栏导航菜单

      根据v-for遍历菜单参数,渲染导航栏。 使用Element UI 的 Container 布局容器和NavMenu导航菜单组件,使用router-view存放二级路由出口。 html: js: router/index.js:  配置路由  

    2024年02月08日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包