在Vue3中实现动态路由的示例代码

更新时间：2024年07月10日 09:49:38 作者：大厂前端程序员

Vue3中的动态路由是一种高级功能,它允许你在URL中包含变量,这些变量可以在组件内部通过$route.params对象访问,动态路由通常用于构建可配置性强、更具灵活性的应用,本文详细介绍了如何在vue3中实现动态路由,需要的朋友可以参考下

编写通用动态路由菜单
(1)提取通用路由文件
(2)菜单组件读取路由，动态渲染菜单项
(3)绑定跳转事件
(4）同步路由的更新到菜单项高亮
(5)按需补充更多能力（可以参考网上的框架），比如根据配置控制菜单的显隐
整体的代码实现如下

选用技术栈vue3+typescripy+element-plus ui+router 4

编写通用动态路由菜单

目标:根据路由配置信息，自动生成菜单内容。实现更通用、更自动的菜单配置。

通用路由菜单组件实现步骤

1.提取通用路由文件

2.菜单组件读取路由，动态渲染菜单项

3.绑定跳转事件

4.同步路由的更新到菜单项高亮

5.按需补充更多能力

(1)提取通用路由文件

把 router/index.ts 中的路由变量定义为单独的文件 routes.ts，代码如下:

export const routes: Array<RouteRecordRaw> = [
    {
        path: '/shouye',
        name: '首页',
        component: Shouye,
    },
    {
      path: '/keichengxuexi',
      name: '课程学习',
      component: Courselearning,
    },
}

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

(2)菜单组件读取路由，动态渲染菜单项

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

模板中根据路由数组渲染菜单：

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

(3)绑定跳转事件

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

模板修改：

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

(4）同步路由的更新到菜单项高亮

同步高亮原理：首先点击菜单项 => 触发点击事件并跳转更新路由 => 更新路由后，同步去更新菜单栏的高亮状态。

使用 Vue Router 的 afterEach 路由钩子实现：

const router = useRouter();
 
// Tab 栏选中菜单项
const selectedKeys = ref(["/"]);
// 路由跳转后，更新选中的菜单项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

模板引入变量：

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

还可以给路由菜单组件增加更多能力。

(5)按需补充更多能力（可以参考网上的框架），比如根据配置控制菜单的显隐

利用 routes 配置的 meta 属性实现。routes.ts 中给路由配置新增一个标志位 hideInMenu，用于判断路由是否显隐：

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

然后根据该标志位过滤路由数组，仅保留需要展示的元素。

不要用 v-for + v-if 去条件渲染元素，这样会先循环所有的元素，导致性能的浪费。

// 展示在菜单的路由数组
const visibleRoutes = routes.filter((item) => {
  if (item.meta?.hideInMenu) {
    return false;
  }
  return true;
});

整体的代码实现如下

菜单栏组件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的判断逻辑。这个路由下是否还有子路由。

<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();
//当前选中的菜单项
const selectedKeys = ref(["/"]);
//路由跳转时，选中菜单项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;
})
 
//点击菜单跳转到对应页面
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: '课程学习',
      component: Courselearning,
      meta:{
        hideInMenu: true,
      },
    },
    {
      path: '/ketangxiaolian',
      name: '课堂小练',
      children: [
        {
            path: '/network-world',
            name: '神奇的网络世界',
            component: Networld,
        },
        {
            path: '/internet',
            name: '走进互联网',
            component: Internet,
        },
        {
            path: '/information-collection',
            name: '网上收集信息',
            component: Collectinformation,
        },
        {
            path: '/communication',
            name: '网上交流信息',
            component: Communication,
        },
        {
            path: '/soho-network',
            name: '组件SOHO网络',
            component: Sohonetwork,
        },
    ]
    },
}

以上就是在Vue3中实现动态路由的示例代码的详细内容，更多关于Vue3动态路由的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

实时通信Socket io的使用示例详解
这篇文章主要为大家介绍了实时通信Socket io的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
vue随机验证码组件的封装实现
这篇文章主要为大家详细介绍了如何封装一个随机验证码的VUE组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
vuejs实现下拉框菜单选择
这篇文章主要为大家详细介绍了vuejs实现下拉框菜单选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
Vue3学习之表单的使用示例详解
这篇文章主要为大家详细介绍了Vue3中表单的使用的相关知识，文中的示例代码讲解详细，对我们掌握Vue3有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下
2022-12-12
Vue简单封装axios之解决post请求后端接收不到参数问题
这篇文章主要介绍了Vue简单封装axios之解决post请求后端接收不到参数问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
Vue3实现批量异步更新
这篇文章主要为大家详细介绍了Vue3批量异步更新是如何实现的，文中的示例代码简洁易懂，具有一定的借鉴价值，感兴趣的小伙伴可以跟随小编一起学习一下
2023-08-08
详解jquery和vue对比
这篇文章主要介绍了jquery和vue对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
浅谈Vue灰度发布新功能的使用
本文主要介绍了浅谈Vue灰度发布新功能的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
VueJS 组件参数名命名与组件属性转化问题
这篇文章主要介绍了VueJS 组件参数名命名与组件属性转化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-12-12
Vue表单demo v-model双向绑定问题
本文通过实例代码给大家介绍了Vue表单demo v-model双向绑定问题,代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06