快捷導(dǎo)航

vue3.0+element Plus實現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能

更新時間：2023年07月18日 10:45:12 作者：歡喜~999

這篇文章主要介紹了vue3.0+element Plus實現(xiàn)頁面布局，側(cè)邊欄菜單路由跳轉(zhuǎn),需要的朋友可以參考下

一. 先在router.js文件中配置路由，將側(cè)邊欄中需要跳轉(zhuǎn)的頁面都添加到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目錄下新建一個文件，里面包含側(cè)邊欄要跳轉(zhuǎn)的頁面

三. 頁面樣式布局

1. 我選擇使用自定義組件BaseLayout.vue文件來設(shè)置header和aside樣式顯示

<template>
  <el-config-provider namespace="ep" :locale="zhCn">
//BaseHeader是我自己的定義的組件，為當(dāng)前頁面的頭部
    <div class="top-header">
      <BaseHeader />
      <div>
        <user-avatar />
      </div>
    </div>
    <div class="app-main" v-if="userInfo !== null">
//BaseSide 自定義組件，為當(dāng)前頁面的側(cè)邊欄
      <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 布局容器

2. BaseHeader.vue文件里面為頁面頭部樣式，頭部樣式相對簡單

<template>
  <div class="top-nav-bar">
    <div class="app-title">
      <router-link :to="{ name: 'home' }"> 病理圖像AI自訓(xùn)練中臺 </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')">應(yīng)用市場</el-menu-item>
      <el-menu-item index="4" @click="goPage('/project')"
        >項目列表</el-menu-item
      >
    </el-menu>
  </div>
</template>

3. BaseSide.vue文件里面是側(cè)邊欄樣式，這里是重點?。?！這里進(jìn)行頁面路由跳轉(zhuǎn)設(shè)置

<template>
  <el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <div v-for="i in listProject?.ListProjectByTenant" :key="i.id">
//因為我的側(cè)邊欄數(shù)據(jù)是需要動態(tài)獲取的，所以這里的index不能相同，否則幾個側(cè)邊欄會同時展開時
      <el-sub-menu :index="i">
        <template #title>{{ i.name }}</template>
        <el-menu-item index="alg">
//這里使用<router-link>，通過屬性to來進(jìn)行跳轉(zhuǎn)，里面的name就是剛才在router.js文件中設(shè)置的，params這里包含的是路由跳轉(zhuǎn)時傳遞的參數(shù)
          <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>
//因為我的數(shù)據(jù)是動態(tài)獲取，所以要先判斷一下是否有數(shù)據(jù)，有數(shù)據(jù)再顯示側(cè)邊欄
  <BaseLayout :hasBaseSide="isProjectLoaded && projectListData.length">
    <PaddingLayout>
      <el-card class="table-card" shadow="never">
        <router-view></router-view>
      </el-card>
    </PaddingLayout>
  </AlgProjectLayout>
</template>

樣式如下：

到此這篇關(guān)于vue3.0+element Plus實現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能的文章就介紹到這了,更多相關(guān)vue3.0 element Plus側(cè)邊欄菜單路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: