快捷導(dǎo)航

Vue3實(shí)現(xiàn)動態(tài)切換Menu的示例代碼

更新時間：2024年11月08日 10:23:38 作者：Bjnsfxs

本文介紹了在Vue3項(xiàng)目中使用頂部導(dǎo)航欄和側(cè)邊欄,通過頂部導(dǎo)航控制側(cè)邊欄的生成,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

項(xiàng)目中需要使用一個頂部導(dǎo)航欄和側(cè)邊欄，頂部導(dǎo)航欄來控制側(cè)邊欄的生成，于是需要動態(tài)切換

我是直接根據(jù)路由文件來控制整個菜單的生成結(jié)構(gòu)，首先定義一下頂部導(dǎo)航欄的信息，他的key需要與路由的頂級name匹配，方便切換

// APP.vue

// 頂部導(dǎo)航欄信息
const navBarMenuList = [
  {
    name: 'Home',
    title: '應(yīng)用分析'
  },

  {
    name: 'AppManage',
    title: '應(yīng)用管理'
  }
]

路由文件中，給每個需要選中的菜單項(xiàng)添加上activeMenu，使用path作為值，同時這里我的需求中需要事件管理不展示子菜單，所以額外配置了一個showchild

export default [
  {
    path: '/appManage',	// 頂級路由(請讓我這樣簡稱)
    redirect: '/appManage/gameBaseInfo',
    name: 'AppManage',	// 這里與navBarMenu的name對應(yīng)
    children: [
      {
        path: 'gameBaseInfo',	// 次級路由
        name: 'GameBaseInfo',
        icon: 'Memo',
        cnName: '基本信息',
        component: () => import('@/views/AppManage/BaseInfoView.vue'),
        meta: {
          activeMenu: 'gameBaseInfo',	// 用于給菜單的index項(xiàng)賦值，同時對應(yīng)這個路由的地址
          needKeepAlive: true
        }
      },
      {
        path: 'eventManage',
        name: 'EventManage',
        icon: 'Management',
        cnName: '事件管理',
        showChild: false,	// 是否需要展示子菜單
        component: () => import('@/views/AppManage/EventManageView.vue'),
        redirect: '/appManage/eventManage/eventTable',
        meta: {
          needKeepAlive: true,
          activeMenu: 'eventManage'
        },
        children: [
          {
            path: 'eventDetail/:eventID?', // 子路由
            name: 'EventDetail',
            component: () => import('@/views/AppManage/EventDetailsView.vue')
          },
          {
            path: 'eventTable',
            name: 'EventTable',
            component: () => import('@/views/AppManage/EventMangeTable.vue')
          }
        ]
      }
    ]
  }
]

菜單的跳轉(zhuǎn)不使用el-menu自帶的router模式，自己使用route-link來實(shí)現(xiàn)跳轉(zhuǎn)，跳轉(zhuǎn)的路由則直接是由:頂級路由 + 次級路由+子路由形成。default-active一定要開啟，以此來作為我們切換的根據(jù)，然后根據(jù)路由文件中有無children來判斷是否生成子菜單。每個菜單項(xiàng)的index則對應(yīng)路由文件中的activemenu,當(dāng)路由切換后，defaultactive會自動計(jì)算出當(dāng)前應(yīng)該選中哪個菜單項(xiàng)。判斷條件中的item.showchild是因?yàn)槲矣行┎藛涡枰徽故咀硬藛巍?/p>

<script lang='ts' setup>
// 頂部導(dǎo)航欄的選中情況
const navBarSelect = ref<string>('Home') 

// 路由信息，同時也是側(cè)邊欄生成的依據(jù)信息
const menuList = reactive<Array<any>>([])

// 頂部導(dǎo)航欄信息
const navBarMenuList = [
  {
    name: 'Home',
    title: '應(yīng)用分析'
  },

  {
    name: 'AppManage',
    title: '應(yīng)用管理'
  }
]

// 側(cè)邊欄跳轉(zhuǎn)路由的基本路由
const basePath = ref<string | undefined>()

/**
 * @description: 創(chuàng)建側(cè)邊欄menu
 * @return {*}
 */
const createdMenuList = () => {
  let routes = router.options.routes // 獲取路由信息
  let activeMenu = routes.find((item) => {
    return item.name === navBarSelect.value // 根據(jù)頂部導(dǎo)航欄的選中情況來選擇選中哪個具體的路由信息，可以打印自己看一下
  })
  basePath.value = activeMenu?.path // 找到需要激活的菜單的路由，后續(xù)用來拼接需要跳轉(zhuǎn)的路由
  menuList.splice(0, menuList.length, ...(activeMenu?.children as Array<any>)) // 清空原來的路由信息，并且加入新選中的
}
    
// 默認(rèn)選中,他根據(jù)路由文件中的meta的activeMenu來判斷當(dāng)前選中的那個菜單
const defaultActive = computed(() => {
  return route.meta.activeMenu
})

</script>
   <!-- 頂部導(dǎo)航欄 -->
        <div class="navBarMenu">
          <el-menu
            :default-active="navBarSelect"
            class="el-menu-demo"
            mode="horizontal"
            @select="changeNavBar"
          >
            <el-menu-item
              v-for="item in navBarMenuList"
              class="navBarMenuItem"
              :index="item.name"
              >{{ item.title }}</el-menu-item
            >
          </el-menu>
        </div>
      <!-- 側(cè)邊欄 -->
<el-menu
          :default-active="defaultActive"
          class="sideBar"
          :collapse="isCollapse"
          ref="siderBar"
        >
          <template v-for="(item, index) in menuList">
            <el-sub-menu :index="`${index}`" v-if="item.children && item.showChild">
              <template #title>
                <el-icon><component :is="item.icon"></component></el-icon>
                <span>{{ item.cnName }}</span>
              </template>
              <router-link
                style="text-decoration: none"
                v-for="val in item.children"
                :to="{ path: basePath + '/' + item.path + '/' + val.path }"
                :key="index"
              >
                <el-menu-item :index="val.path">{{ val.cnName }}</el-menu-item>
              </router-link>
            </el-sub-menu>

            <router-link
              style="text-decoration: none"
              v-else
              :to="{ path: basePath + '/' + item.path }"
              :key="index"
            >
              <el-menu-item :index="item.path">
                <template #title>
                  <el-icon><component :is="item.icon" /></el-icon>
                  <span class="menuTitle">{{ item.cnName }}</span>
                </template>
              </el-menu-item>
            </router-link>
          </template>
          <div class="sideBarFold" @click="changeCollapse">
            <el-icon :size="25"><Fold /></el-icon>
          </div>
        </el-menu>

如果還有不清楚地地方可以打印一下routes，看一下就明白了。

到此這篇關(guān)于Vue3實(shí)現(xiàn)動態(tài)切換Menu的示例代碼的文章就介紹到這了,更多相關(guān)Vue3 動態(tài)切換Menu內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: