VUE如何后端控制及动态路由详细讲解

后端控制及动态路由详解

一、引言

在现代化的Web应用中,动态路由扮演着至关重要的角色,它允许我们根据用户的权限或其他条件动态地加载和展示不同的页面。本文将详细讲解如何使用Vue Router实现后端控制及动态路由,并通过实际代码示例进行说明。

二、环境搭建

首先,确保你的项目中已经安装了Vue Router。你可以通过以下命令进行安装

复制代码
npm install vue-router

三、基础路由配置

导入路由和页面

复制代码
   import { createRouter, createWebHashHistory } from "vue-router";
   import { useStore } from "../stores/user";

这里,我们导入了createRoutercreateWebHashHistory用于创建路由实例,同时导入了useStore用于获取Pinia存储的状态。
2.

定义基础路由

复制代码
   const baseRoutes = [
     { path: "/", name: "login", component: () => import("../views/login.vue") },
     { path: "/totalTwo", component: () => import("../views/total/totalTwo.vue"), children: [] },
     { path: "/totalOne", component: () => import("../views/total/totalOne.vue"), children: [] },
     { path: "/home", name: "home", component: () => import("../views/home.vue"), meta: { title: "首页" } },
   ];

这些是应用的基本路由,无论用户权限如何,都将可用。

四、全部路由配置

复制代码
const totalArray = [
  // ...其他路由配置
  { id: 2, pid: 0, path: "/comp", name: "门诊", meta: { permissions: ["1"] }, children: [...] },
  { id: 8, pid: 0, path: "/hospital", name: "住院", meta: { permissions: ["1"] }, children: [...] },
  // ...更多路由配置
];

这里定义了全部的路由配置,包括每个路由的ID、父ID、路径、名称、元信息(如权限)和子路由。

五、动态路由配置

复制代码
const dynamicRoutes = [
  { path: "/home", name: "首页", component: () => import("../views/home.vue"), meta: { title: "首页" } },
  { id: 2, pid: 0, path: "/outpatient", name: "门诊", meta: { permissions: ["1"] }, children: [...] },
  // ...更多动态路由配置
];

动态路由是根据用户权限或其他条件动态添加到路由实例中的。

六、过滤和存储匹配的路由

1.过滤匹配的路由

复制代码
const matchedRoutes = dynamicRoutes.filter((route1) =>
  totalArray.some(
    (route2) => route1.name === route2.name || route1.path === route2.path
  )
);

这段代码通过比较名称(name)和路径(path)来过滤出匹配的路由

2.存储匹配的路由

复制代码
localStorage.setItem("matchedRoutes", JSON.stringify(matchedRoutes));

过滤后的路由被存储在本地存储中,以便在菜单页面中使用

七、导航守卫

复制代码
router.beforeEach(async (to, from, next) => {
  const store = useStore();
  const isLogin = !!store.id;

  if (!isLogin) {
    return to.path === "/" ? next() : next("/");
  }

  if (to.path === "/") {
    return next("/about");
  }

  if (!store.id) {
    return next("/");
  }

  if (store.role) {
    const role = String(store.role);
    for (let i in dynamicRoutes) {
      const permission = String(dynamicRoutes[i].meta.permissions);
      if (permission === role) {
        let myRoute = [
          { path: "/home", name: "home", component: () => import("../views/home.vue"), meta: { title: "首页" } },
        ];
        const isRouteExist = baseRoutes.some(
          (baseRoute) => baseRoute.path === dynamicRoutes[i].path
        );
        if (!isRouteExist) {
          myRoute.push(dynamicRoutes[i]);
        }
        store.getRoutes(myRoute);
      }
    }
  }
  next();
});

导航守卫用于在路由跳转前进行权限验证和动态路由的添加。

八、菜单页面

在菜单页面获取一下匹配的路由

复制代码
const matchedRoutes = JSON.parse(localStorage.getItem('matchedRoutes'))

菜单页面使用Element Plus组件库进行布局,并通过循环渲染动态路由来生成菜单。

复制代码
<template>
  <div>
    <el-menu :default-active="activeMenu" class="el-menu-vertical" :collapse="isCollapse" background-color="#fff"
      text-color="#000" active-text-color="#409EFF">
      <!-- 循环渲染动态路由 -->
      <template v-for="route in matchedRoutes" :key="route.id">
        <!-- 有子路由的菜单项 -->
        <el-sub-menu v-if="route.children && route.children.length" :index="route.path">
          <template #title>
            <el-icon>
              <component :is="getIcon(route.name)" />
            </el-icon>
            <span>{{ route.name }}</span>
          </template>

          <!-- 渲染子菜单 -->
          <el-menu-item v-for="child in route.children" :key="child.id" :index="child.path"
            @click="dayun(child.path, child.name)">
            <el-icon>
              <component :is="getIcon(child.name)" />
            </el-icon>
            <span>{{ child.name }}</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 没有子路由的单独菜单项 -->
        <el-menu-item v-else :index="route.path" @click="dayun(route.path, route.name)">
          <el-icon>
            <component :is="getIcon(route.name)" />
          </el-icon>
          <span>{{ route.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

九、总结

通过以上步骤,我们实现了基于后端控制的动态路由功能。这种实现方式不仅提高了路由管理的灵活性,还增强了应用的安全性。在实际项目中,你可以根据具体需求进行调整和优化。

相关推荐
知识分享小能手7 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf7 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊8 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel8 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260858 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
蓝莓味的口香糖8 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
ObjectX前端实验室9 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart9 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级9 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang9 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构