动态路由 vue

最新推荐文章于 2024-07-04 17:04:23 发布

你要走就走

最新推荐文章于 2024-07-04 17:04:23 发布

阅读量306

点赞数

分类专栏：动态路由文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_48852004/article/details/120217870

版权

本文介绍了Vue.js项目中动态路由的设置方法，包括简单的角色路由设置和复杂的后端返回路由数据的处理。详细步骤涉及角色权限配置、asyncRouter.js文件创建、路由守卫permission.js的编写，以及在main.js中引入和使用。在处理动态路由时要注意页面刷新可能导致的数据丢失问题，需要将store中的数据存储到本地以保持路由状态。

摘要由CSDN通过智能技术生成

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到动态路由的设置了。

动态路由设置一般有两种：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

1、简单的角色路由设置

（1）配置项目路由权限

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
Vue.use(Router)
// 权限路由列表
let asyncRoutes = [
    {
   
        path: '/permission',
        component: Layout,
        redirect: '/permission/page',
        alwaysShow: true, 
        name: 'Permission',
        meta: {
   
            title: 'Permission',
            roles: ['admin', 'editor'] // 普通的用户角色
        },
        children: [
            {
   
                path: 'page',
                component: () => import('@/views/permission/page'),
                name: 'PagePermission',
                meta: {
   
                    title: 'Page',
                    roles: ['editor']  //  editor角色的用户才能访问该页面
                }
            },
            {
   
                path: 'role',
                component: () => import('@/views/permission/role'),
                name: 'RolePermission',
                meta: {
   
                    title: 'Role',
                    roles: ['admin']    //  admin角色的用户才能访问该页面
                }
            }
        ]
    },
 
]
// 静态路由
let defaultRouter = [{
   
    path: '/404',
    name: '404',
    component: () => import('@/views/404'),
     meta: {
   
        title: '404'
    }
}]
let router = new Router({
   
    mode: 'history',
    scrollBehavior: () => ({
    y: 0 }),
    routes: defaultRouter
})
export default router

（2）新建一个公共的asyncRouter.js文件

// asyncRouter.js
//判断当前角色是否有访问权限
function hasPermission(roles, route) {
   
  if (route.meta && route.meta.roles) {
   
    return roles.some(role => route.meta.roles.includes(role))