在Vue3中實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼

更新時(shí)間：2024年07月10日 09:49:38 作者：大廠前端程序員

Vue3中的動(dòng)態(tài)路由是一種高級(jí)功能,它允許你在URL中包含變量,這些變量可以在組件內(nèi)部通過$route.params對(duì)象訪問,動(dòng)態(tài)路由通常用于構(gòu)建可配置性強(qiáng)、更具靈活性的應(yīng)用,本文詳細(xì)介紹了如何在vue3中實(shí)現(xiàn)動(dòng)態(tài)路由,需要的朋友可以參考下

編寫通用動(dòng)態(tài)路由菜單
(1)提取通用路由文件
(2)菜單組件讀取路由，動(dòng)態(tài)渲染菜單項(xiàng)
(3)綁定跳轉(zhuǎn)事件
(4）同步路由的更新到菜單項(xiàng)高亮
(5)按需補(bǔ)充更多能力（可以參考網(wǎng)上的框架），比如根據(jù)配置控制菜單的顯隱
整體的代碼實(shí)現(xiàn)如下

選用技術(shù)棧vue3+typescripy+element-plus ui+router 4

編寫通用動(dòng)態(tài)路由菜單

目標(biāo):根據(jù)路由配置信息，自動(dòng)生成菜單內(nèi)容。實(shí)現(xiàn)更通用、更自動(dòng)的菜單配置。

通用路由菜單組件實(shí)現(xiàn)步驟

1.提取通用路由文件

2.菜單組件讀取路由，動(dòng)態(tài)渲染菜單項(xiàng)

3.綁定跳轉(zhuǎn)事件

4.同步路由的更新到菜單項(xiàng)高亮

5.按需補(bǔ)充更多能力

(1)提取通用路由文件

把 router/index.ts 中的路由變量定義為單獨(dú)的文件 routes.ts，代碼如下:

export const routes: Array<RouteRecordRaw> = [
    {
        path: '/shouye',
        name: '首頁',
        component: Shouye,
    },
    {
      path: '/keichengxuexi',
      name: '課程學(xué)習(xí)',
      component: Courselearning,
    },
}

然后在 router/index.ts 中引入 routes.

(2)菜單組件讀取路由，動(dòng)態(tài)渲染菜單項(xiàng)

<script setup lang= ts >
import { routes }from "../router/routes";
</script>

模板中根據(jù)路由數(shù)組渲染菜單：

<el-menu-item v-for="item in routes" :key="item.path">
  {{ item.name }}
</el-menu-item>

(3)綁定跳轉(zhuǎn)事件

import { useRoute, useRouter } from "vue-router";
const router = useRouter();
 
// 路由跳轉(zhuǎn)事件
const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};

模板修改：

<el-menu
  mode="horizontal"
  @menu-item-click="doMenuClick"
>
  ...
</el-menu>

(4）同步路由的更新到菜單項(xiàng)高亮

同步高亮原理：首先點(diǎn)擊菜單項(xiàng) => 觸發(fā)點(diǎn)擊事件并跳轉(zhuǎn)更新路由 => 更新路由后，同步去更新菜單欄的高亮狀態(tài)。

使用 Vue Router 的 afterEach 路由鉤子實(shí)現(xiàn)：

const router = useRouter();
 
// Tab 欄選中菜單項(xiàng)
const selectedKeys = ref(["/"]);
// 路由跳轉(zhuǎn)后，更新選中的菜單項(xiàng)
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

模板引入變量：

<el-menu
  mode="horizontal"
  :default-active="selectedKeys[0]" 
  @menu-item-click="doMenuClick"
>
</el-menu>

還可以給路由菜單組件增加更多能力。

(5)按需補(bǔ)充更多能力（可以參考網(wǎng)上的框架），比如根據(jù)配置控制菜單的顯隱

利用 routes 配置的 meta 屬性實(shí)現(xiàn)。routes.ts 中給路由配置新增一個(gè)標(biāo)志位 hideInMenu，用于判斷路由是否顯隱：

  {
    path: "/hide",
    name: "隱藏頁面",
    component: HomeView,
    meta: {
      hideInMenu: true,
    },
  },

然后根據(jù)該標(biāo)志位過濾路由數(shù)組，僅保留需要展示的元素。

不要用 v-for + v-if 去條件渲染元素，這樣會(huì)先循環(huán)所有的元素，導(dǎo)致性能的浪費(fèi)。

// 展示在菜單的路由數(shù)組
const visibleRoutes = routes.filter((item) => {
  if (item.meta?.hideInMenu) {
    return false;
  }
  return true;
});

整體的代碼實(shí)現(xiàn)如下

菜單欄組件GlobalHeader.vue

<template>
  <div id="globalHeader">
    <el-menu :default-active="selectedKeys[0]" 
             class="el-menu-demo" 
             mode="horizontal" 
             @select="handleSelect"
             background-color="rgb(255, 165, 104)" 
             text-color="white"
             active-text-color="rgb(0,0,51)">
          <el-menu-item v-for="item in visibleRoutes" :key="item.path">
            <el-sub-menu v-if="item.children" :index="item.path">
              <template #title>
                {{ item.name }}
              </template>
              <el-menu-item v-for="child in item.children" :key="child.path" @click="doMenuClick(`${item.path}/${child.path}`)">
                {{ child.name }}
              </el-menu-item>
            </el-sub-menu>
            <template v-else>
          <el-menu-item @click="doMenuClick(item.path)">
            {{ item.name }}
          </el-menu-item>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

上述菜單由于加入了子菜單的原因，所以增加了一層if的判斷邏輯。這個(gè)路由下是否還有子路由。

<script setup lang="ts">
import { routes } from '../router/routes'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
 
 
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
 
const router = useRouter();
//當(dāng)前選中的菜單項(xiàng)
const selectedKeys = ref(["/"]);
//路由跳轉(zhuǎn)時(shí)，選中菜單項(xiàng)1
router.afterEach((to, from) => {
  selectedKeys.value = [to.path];
})
 
//展示在菜單中的路由
const visibleRoutes = routes.filter((item) => {
  if (item.meta?.hideInMenu) {
    console.log('隱藏的菜單:', item.name);
    return false;
  }
  return true;
})
 
//點(diǎn)擊菜單跳轉(zhuǎn)到對(duì)應(yīng)頁面
const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
}
 
 
</script>

routes.ts 路由組件

import {  RouteRecordRaw } from "vue-router";
import Shouye from "../views/Shouye.vue";
import Courselearning from "../views/Courselearning.vue";
 
//vue3引入路由的方式
export const routes: Array<RouteRecordRaw> = [
    {
        path: '/shouye',
        name: '首頁',
        component: Shouye,
    },
    {
      path: '/keichengxuexi',
      name: '課程學(xué)習(xí)',
      component: Courselearning,
      meta:{
        hideInMenu: true,
      },
    },
    {
      path: '/ketangxiaolian',
      name: '課堂小練',
      children: [
        {
            path: '/network-world',
            name: '神奇的網(wǎng)絡(luò)世界',
            component: Networld,
        },
        {
            path: '/internet',
            name: '走進(jìn)互聯(lián)網(wǎng)',
            component: Internet,
        },
        {
            path: '/information-collection',
            name: '網(wǎng)上收集信息',
            component: Collectinformation,
        },
        {
            path: '/communication',
            name: '網(wǎng)上交流信息',
            component: Communication,
        },
        {
            path: '/soho-network',
            name: '組件SOHO網(wǎng)絡(luò)',
            component: Sohonetwork,
        },
    ]
    },
}

以上就是在Vue3中實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3動(dòng)態(tài)路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: