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

在Vue.js中，前端控制通常指的是通过Vue的响应式系统、组件化、路由、状态管理等技术来实现对前端应用的控制和管理

一、前端路由控制基础

使用 vue-router 管理路由，通过路由守卫和动态添加路由实现权限控制。

1. 安装和配置

npm install vue-router@4

//路由实例
const router = createRouter({history: createWebHashHistory(),
});

二、动态路由实现原理

根据用户权限动态生成路由表，通过 router.addRoute() 添加路由

1. 定义路由模板（静态+动态）

//基础路由
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 dynamicRoutes = [{path: "/about",name: "about",component: () => import("../views/aboutPage.vue"),meta: { requiresAuth: true, permissions: ["2"] },},{path: "/dashboard",name: "Dashboard",component: () => import("../views/Dashboard.vue"),meta: { requiresAuth: true, permissions: ["1"] },},
];
console.log(dynamicRoutes, "全部路由");
// 路由实例
const router = createRouter({history: createWebHashHistory(),routes: [...baseRoutes, ...dynamicRoutes], // 初始化时合并路由  
});

2. 动态添加路由

  // 第一层循环：过滤有权限的路由const allowedRoutes = dynamicRoutes.filter((route) => {return store.permissions?.some((perm) =>route.meta.permissions.includes(perm));});// 第二层循环：添加路由allowedRoutes.forEach((route) => {if (!router.hasRoute(route.name)) {// 删除parentRoute.name参数和path修改router.addRoute(route); // 直接添加为顶级路由}});
}

三、路由守卫实现权限控制

使用全局前置守卫验证权限

// router/index.js
router.beforeEach((to, from, next) => {const isAuthenticated = localStorage.getItem('token')// 需要登录但未登录if (to.meta.requiresAuth && !isAuthenticated) {next('/login')}// 已登录但访问/loginelse if (to.path === '/login' && isAuthenticated) {next('/dashboard')}// 检查路由权限else if (to.meta.role && !userRoles.includes(to.meta.role)) {next('/404') // 无权限页面}else {next()}
})

四、动态菜单生成

根据过滤后的路由生成导航菜单

<!-- 在侧边栏组件中 -->
<template><div v-for="route in accessibleRoutes" :key="route.path"><router-link :to="route.path">{{ route.meta?.title }}</router-link><div v-if="route.children"><!-- 递归处理子路由 --></div></div>
</template><script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'export default {setup() {const router = useRouter()const accessibleRoutes = computed(() => {return router.options.routes.filter(route => !route.meta?.hidden && hasPermission(route)})return { accessibleRoutes }}
}
</script>