广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现动态路由详细
  • 145
分享到

vue实现动态路由详细

2024-04-02 19:04:59 145人浏览 安东尼
摘要

目录一、前端控制1、在router.js文件(把静态路由和动态路由分别写在router.js) 2、store/permission.js(在Vuex维护一个state,通过配角色来

主流的实现方式:

简单聊一下两种方式的优势,毕竟如果你从来没做过,说再多也看不明白,还是得看代码

前端控制

  • 不用后端帮助,路由表维护在前端
  • 逻辑相对比较简单,比较容易上手

后端控制

一、前端控制

思路:在路由配置里,通过meta属性,扩展权限相关的字段,在路由守卫里通过判断这个权限标识,实现路由的动态增加,及页面跳转;如:我们增加一个role字段来控制角色

具体方案:

1、根据登录用户的账号,返回前端用户的角色

2、前端根据用户的角色,跟路由表的meta.role进行匹配

3、讲匹配到的路由形成可访问路由

核心代码逻辑

1、在router.js文件(把静态路由和动态路由分别写在router.js)


import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Layout from '@/layout'

// constantRoutes  静态路由,主要是登录页、404页等不需要动态的路由
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  }
] 

// asyncRoutes 动态路由
export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    alwaysshow: true, 
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      // 核心代码,可以通过配的角色来进行遍历,从而是否展示
      // 这个意思就是admin、editor这两个角色,这个菜单是可以显示
      roles: ['admin', 'editor']
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'Page Permission',
          // 这个意思就是只有admin能展示
          roles: ['admin']
        }
      }
     ]
    }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// 这个是重置路由用的,很有用,别看这么几行代码
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher 
}

export default router

2、store/permission.js(在vuex维护一个state,通过配角色来控制菜单显不显示)


import { asyncRoutes, constantRoutes } from '@/router'

// 这个方法是用来把角色和route.meta.role来进行匹配
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}


// 这个方法是通过递归来遍历路由,把有权限的路由给遍历出来
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    // 这个地方维护了两个状态一个是addRouters,一个是routes
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        // 核心代码,把路由和获取到的角色(后台获取的)传进去进行匹配
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      // 把匹配完有权限的路由给set到vuex里面
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3、src/permission.js

(新建一个路由守卫函数,可以在main.js,也可以抽离出来一个文件)

这里面的代码主要是控制路由跳转之前,先查一下有哪些可访问的路由,登录以后跳转的逻辑可以在这个地方写


// permission.js
router.beforeEach((to, from, next) => {
  if (store.getters.token) { // 判断是否有token
    if (to.path === '/login') {
      next({ path: '/' });
    } else {
        // 判断当前用户是否已拉取完user_info信息
      if (store.getters.roles.length === 0) {
        store.dispatch('GetInfo').then(res => { // 拉取info
          const roles = res.data.role;
          // 把获取到的role传进去进行匹配,生成可以访问的路由
          store.dispatch('GenerateRoutes', { roles }).then(() => { 
            // 动态添加可访问路由表(核心代码,没有它啥也干不了)
            router.addRoutes(store.getters.addRouters)
            
            // hack方法 确保addRoutes已完成
            next({ ...to, replace: true })
          })
        }).catch(err => {
          console.log(err);
        });
      } else {
        next() //当有用户权限的时候,说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
      next();
    } else {
      next('/login'); // 否则全部重定向到登录页
    }
  }
})

4、侧边栏的可以从vuex里面取数据来进行渲染

核心代码是从router取可以用的路由对象,来进行侧边栏的渲染,不管是前端动态加载还是后端动态加载路由,这个代码都是一样的


<!-- layout/components/siderbar.vue -->
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
    // 把取到的路由进行循环作为参数传给子组件
    <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
// 获取有权限的路由
routes() {
  return this.$router.options.routes
}


<!-- layout/components/siderbarItem.vue -->
  <template slot="title">
    <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
  </template>
  <sidebar-item
    v-for="child in item.children"
    :key="child.path"
    :is-nest="true"
    :item="child"
    :base-path="resolvePath(child.path)"
    class="nest-menu"
  />

  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  }

前端控制路由,逻辑相对简单,后端只需要存这个用户的角色就可以了,前端拿用户的角色进行匹配。但是如果新增角色,就会非常痛苦,每一个都要加。

二、后端控制路由

后端控制大致思路是:路由配置放在数据库表里,用户登录成功后,根据角色权限,把有权限的菜单传给前端,前端格式化成页面路由识别的结构,再渲染到页面菜单上;

  • 用户登录以后,后端根据该用户的角色,直接生成可访问的路由数据,注意这个地方是数据
  • 前端根据后端返回的路由数据,转成自己需要的路由结构

具体逻辑:

  • router.js里面只放一些静态的路由,login、404之类
  • 整理一份数据结构,存到表里
  • 从后端获取路由数据,写一个数据转换的方法,讲数据转成可访问的路由
  • 也是维护一个vuex状态,将转换好的路由存到vuex里面
  • 侧边栏也是从路由取数据进行渲染

因为前段控制和后端控制,后面的流程大部分都是一样的,所以这个地方只看看前面不一样的流程:

1、store/permission.js,在vuex里面发送请求获取数据


GenerateRoutes({ commit }, data) {
  return new Promise((resolve, reject) => {
    getRoute(data).then(res => {
     // 将获取到的数据进行一个转换,然后存到vuex里
      const accessedRouters = arrayToMenu(res.data)
      accessedRouters.concat([{ path: '*', redirect: '/404', hidden: true }])
      commit('SET_ROUTERS', accessedRouters)
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
}

2、整理一份数据结构,存到表里


// 页面路由格式
{
    path: '/fORM',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: { title: 'Form', icon: 'form' }
      }
    ]
}

// 整理后的数据格式
// 一级菜单
// parentId为0的就可以当做一级菜单,id最好是可以选4位数,至于为什么等你开发项目的时候就知道了
{
    id: 1300
    parentId: 0
    title: "菜单管理"
    path: "/menu"
    hidden: false
    component: null
    hidden: false
    name: "menu"
},

// 二级菜单
// parentId不为0的,就可以拿parentId跟一级菜单的id去匹配,匹配上的就push到children里面
{
    id: 1307
    parentId: 1300
    title: "子菜单"
    hidden: false
    path: "menuItem"
    component: "menu/menuItem" // 要跟本地的文件地址匹配上
    hidden: false
    name: "menuItem"
}

3、写一个转化方法,把获取到的数据转换成router结构


export function arrayToMenu(array) {
  const nodes = []
  // 获取顶级节点
  for (let i = 0; i < array.length; i++) {
    const row = array[i]
    // 这个exists方法就是判断下有没有子级
    if (!exists(array, row.parentId)) {
      nodes.push({
        path: row.path, // 路由地址
        hidden: row.hidden, // 全部true就行,如果后端没配
        component: Layout, // 一般就是匹配你文件的component
        name: row.name, // 路由名称
        meta: { title: row.title, icon: row.name }, // title就是显示的名字
        id: row.id, // 路由的id
        redirect: 'noredirect'
      })
    }
  }
  const toDo = Array.from(nodes)
  while (toDo.length) {
    const node = toDo.shift()
    // 获取子节点
    for (let i = 0; i < array.length; i++) {
      const row = array[i]
      // parentId等于哪个父级的id,就push到哪个
      if (row.parentId === node.id) {
        const child = {
          path: row.path,
          name: row.name,
          hidden: row.hidden,
          // 核心代码,因为二级路由的component是需要匹配页面的
          component: require('@/views/' + row.component + '/index.vue'),
          meta: { title: row.title, icon: row.name },
          id: row.id
        }
        if (node.children) {
          node.children.push(child)
        } else {
          node.children = [child]
        }
        toDo.push(child)
      }
    }
  }
  return nodes
}
// 看下有没有子级
function exists(rows, parentId) {
  for (let i = 0; i < rows.length; i++) {
    if (rows[i].id === parentId) return true
  }
  return false
}

到此这篇关于vue实现动态路由详细的文章就介绍到这了,更多相关vue实现动态路由内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue实现动态路由详细

本文链接: https://www.lsjlt.com/news/137540.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现动态路由详细
    目录一、前端控制1、在router.js文件(把静态路由和动态路由分别写在router.js) 2、store/permission.js(在vuex维护一个state,通过配角色来...
    99+
    2022-11-12
  • Vue 动态路由的实现详情
    前言: 动态路由是一个常用的功能,根据后台返回的路由json表,前端动态显示可跳转的路由项,下面来讲解一下具体的实现方式: 大致业务需求:前端在login登陆页,输入账号密码后,点击...
    99+
    2022-11-13
  • GateWay路由规则与动态路由详细介绍
    目录1、路由规则2、动态路由1、路由规则 Spring Cloud GateWay 帮我们内置了很多 Predicates功能,实现了各种路由匹配规则(通过 Header、请求参数等...
    99+
    2022-11-13
  • Vue3+Vite实现动态路由的详细实例代码
    项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import { createRouter, ...
    99+
    2022-11-13
  • Vue router动态路由如何实现
    本文小编为大家详细介绍“Vue router动态路由如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue router动态路由如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。实...
    99+
    2023-07-05
  • 怎么用vue实现动态路由
    这篇文章主要介绍了怎么用vue实现动态路由的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用vue实现动态路由文章都会有所收获,下面我们一起来看看吧。1、什么是动态路由?动态路由,动态即不是写死的,是可变的。...
    99+
    2023-07-02
  • Vue如何实现动态路由导航
    这篇文章主要介绍“Vue如何实现动态路由导航”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue如何实现动态路由导航”文章能帮助大家解决问题。1、导航守卫“导航” 表示路由正在发生改变正如其名,vu...
    99+
    2023-07-05
  • VUE路由动态加载如何实现
    这篇文章主要讲解了“VUE路由动态加载如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“VUE路由动态加载如何实现”吧!首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多...
    99+
    2023-07-04
  • vue-admin-template动态路由怎么实现
    本篇内容介绍了“vue-admin-template动态路由怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!提供登录与获取用户信息数据...
    99+
    2023-06-25
  • 手把手教你vue实现动态路由
    目录1、什么是动态路由?2、动态路由的好处3、动态路由如何实现总结1、什么是动态路由? 动态路由,动态即不是写死的,是可变的。我们可以根据自己不同的需求加载不同的路由,做到不同的实现...
    99+
    2022-11-13
  • vue-admin-template 动态路由的实现示例
    提供登录与获取用户信息数据接口 在api/user.js中 import request from '@/utils/request' const Api = { Take...
    99+
    2022-11-12
  • VUE中怎么实现路由动态加载
    VUE中怎么实现路由动态加载,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多,...
    99+
    2022-10-19
  • vue一步到位的实现动态路由
    目录静态路由的回顾动态路由的配置说一些笔者遇到的问题后记最近在写vue项目,需要由后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由),就是配置vue动态路由啦...
    99+
    2022-11-13
  • Vue实现动态路由导航的示例
    目录1、导航守卫二、功能展示 三、原理四、功能实现⛵小结1、导航守卫 “导航” 表示路由正在发生改变 正如其名,vue-router 提供的导航守卫...
    99+
    2023-02-24
    Vue 动态路由导航 Vue 路由导航
  • Spring Cloud Gateway动态路由Apollo实现详解
    目录背景路由的加载实现动态路由背景 在之前我们了解的Spring Cloud Gateway配置路由方式有两种方式 通过配置文件 spring: cloud: gatew...
    99+
    2022-11-13
    Spring Cloud Gateway Apollo Spring Cloud Gateway 动态路由
  • Vue路由传参详细介绍
    目录路由传参效果展示params的类型(后附源码)​​​​​​query参数的类型路由name路由传参 效果展示 通过传参,可以让Persons路由组建中的内容,在新的路由组件Sho...
    99+
    2022-11-13
  • vue动态路由有哪两种实现方法
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表。动态路由设置一般有两种:(1)、简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在...
    99+
    2023-05-14
    动态路由 Vue
  • vue怎么一步到位实现动态路由
    今天小编给大家分享一下vue怎么一步到位实现动态路由的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先呢,先看看静态路由的配...
    99+
    2023-06-30
  • vue动态路由的实现方法有哪些
    本篇内容介绍了“vue动态路由的实现方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue动态路由的两种实现方法:1、简单的角色路由...
    99+
    2023-07-04
  • Vue路由vue-router详细讲解指南
    中文文档:https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作