精华内容
下载资源
问答
  • 我们在开发后台管理项目时,需要实现:根据登陆进来的用户,显示不同的功能菜单。这时候就需要将项目中的路由分成静态路由表和动态路由表,并在路由表中拆分。 静态路由表:不需要做权限控制,每个用户都可以正常...

    1.场景

    我们在开发后台管理项目时,需要实现:根据登陆进来的用户,显示不同的功能菜单。这时候就需要将项目中的路由分成静态路由表和动态路由表,并在路由表中拆分。

    1. 静态路由表:不需要做权限控制,每个用户都可以正常访问。
    2. 动态路由表:需要做权限控制,根据权限的不同显示不同的路由。

    2.思路分析

    用户登录后,根据后端给我们返回权限信息,从从项目中根据用户权限过滤出该用户可以访问的页面,再加上不需要权限就可以访问的路由(例如:‘/login’,‘/404’),生成最终的路由表。

    待续。。。 

    展开全文
  • vue 动态路由实现

    千次阅读 2019-06-04 20:43:36
    vue开发中,第二个问题就是实现动态路由,根据后端权限配置获取对应的路由,最终生成对应的菜单。如下: 1、菜单接口返回结果的数据结构 [{ "url": "/system", "code": "sysmng", "name": "系统管理", "icon": ...

    vue开发中,第二个问题就是实现动态路由,根据后端权限配置获取对应的路由,最终生成对应的菜单。如下:
    1、菜单接口返回结果的数据结构

    [{
    	"url": "/system",
    	"code": "sysmng",
    	"name": "系统管理",
    	"icon": "system",
    	"children": [{
    		"url": "menu",
    		"code": "sysmenumng",
    		"name": "菜单管理",
    		"icon": "menu",
    		"children": [],
    		"parent": "menu"
    	}],
    	"parent": ""
    }]
    

    2、实现菜单接口

    import axios from '../../../axios'
    
    // 获取导航菜单树
    export const fetchSidebarMenu = () => {
      return axios({
        url: '/system/sidebar',
        method: 'get'
      })
    }
    

    3、在store中调用菜单接口,并根据结果转换成动态路由列表

    
    function buildRouters(routers, menutree) {
      if (!menutree) {
        return
      }
      menutree.forEach(function(item) {
        var routerItem = {}
        if (!item.parent) {
          routerItem.component = Layout
          routerItem.path = item.url
          if (routerItem.path.substring(0, 1) !== '/') {
            routerItem.path = '/' + routerItem.path
          }
        } else {
          routerItem.path = item.url
          let cnt = item.component
          routerItem.component = () => import(`@/views/${cnt}`)
        }
        routerItem.name = item.code
        routerItem.meta = { 'title': item.name, 'icon': item.icon }
        routerItem.hidden = item.hidden || false
        routerItem.alwaysShow = false
        routerItem.children = []
        routers.push(routerItem)
        buildRouters(routerItem.children, item.children)
      })
    }
    
    const actions = {
      generateRoutes({ commit }) {
        return new Promise((resolve, reject) => {
          fetchSidebarMenu().then(response => {
            let accessedRoutes = []
            const { data } = response
            buildRouters(accessedRoutes, data)
            accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
            commit('SET_ROUTES', accessedRoutes)
            resolve(accessedRoutes)
          }).catch(error => {
            reject(error)
          })
        })
      }
    }
    

    4、在router.beforeEach中拦截,获取动态路由

          const hasGetUserInfo = store.getters.user
          if (hasGetUserInfo) {
            const hasPermissionRouters = store.getters.permission_routes;
            if(hasPermissionRouters.length === 0){
              const permissionRouters = await store.dispatch('permission/generateRoutes');
              router.options.routes = store.getters.permission_routes;
              router.addRoutes(store.getters.permission_routes);
              next({ ...to, replace: true })
            }else{
              next();
            }
          } 
    
    展开全文
  • 路由菜单是组织起一个应用的关键骨架,为了方便管理,使用了中心化的方式,在 router.config.js统一配置和管理。 基本结构 在这一部分,脚手架通过结合一些配置文件、基本算法及工具函数,搭建好了路由菜单的...

    路由和菜单是组织起一个应用的关键骨架,为了方便管理,使用了中心化的方式,在 router.config.js统一配置和管理。

    基本结构

    在这一部分,脚手架通过结合一些配置文件、基本算法及工具函数,搭建好了路由和菜单的基本框架,主要涉及以下几个模块/功能:

    • 路由管理 通过约定的语法根据在 router.config.js 中配置路由。
    • 菜单生成 根据路由配置来生成菜单。菜单项名称,嵌套路径与路由高度耦合。
    • 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。

    下面简单介绍下各个模块的基本思路

    路由

    目前脚手架中所有的路由都通过 router.config.js来统一管理,在 vue-router 的配置中我们增加了一些参数,如 hideChildrenInMenu,meta.title,meta.icon,meta.permission,来辅助生成菜单。其中:

    • hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。
    • hidden 可以在菜单中不展示这个路由,包括子路由。效果可以查看 other 下的路由配置。
    • meta.titlemeta.icon分别代表生成菜单项的文本和图标。
    • meta.permission 用来配置这个路由的权限,如果配置了将会验证当前用户的权限,并决定是否展示 *(默认情况下)。
    • meta.hidden 可以强制子菜单不显示在菜单上(和父级 hideChildrenInMenu 配合)
    • meta.hiddenHeaderContent 可以强制当前页面不显示 PageHeader 组件中的页面带的 面包屑和页面标题栏

    菜单

    菜单根据 router.config.js生成,具体逻辑在 src/store/modules/permission.js 中的 actions.GenerateRoutes 方法实现。

    需求实例

    上面对这部分的实现概要进行了介绍,接下来通过实际的案例来说明具体该怎么做。

    菜单跳转到外部地址

    你可以直接将完整 url 填入 path 中,框架会自动处理。

    {
        path: 'https://www.baidu.com',
        name: 'docs',
        meta: {
            title: '文档', 
            target: '_blank' // 打开到新窗口
       }
    }
    

    加好后,会默认生成相关的路由及导航。

    新增布局

    在脚手架中我们通过嵌套路由来实现布局模板。router.config.js 是一个数组,其中第一级数据就是我们的布局,如果你需要新增布局可以再直接增加一个新的一级数据。

    {
        path: '/new-router',
        name: 'newRouter',
        redirect: '/new-router/ahaha',
        component: RouteView,
        meta: { title: '仪表盘', keepAlive: true, permission: [ 'dashboard' ] },
        children: [
        {
            path: '/new-router/ahaha',
            name: 'ahaha',
            component: () => import('@/views/dashboard/Analysis'),
            meta: { title: '分析页', keepAlive: false, permission: [ 'ahaha' ] }
        }
    }
    
    

    路由配置项 E.g:

    /**
     * 路由配置说明:
     * 建议:sider menu 请不要超过三级菜单,若超过三级菜单,则应该设计为顶部主菜单 配合左侧次级菜单
     *
     **/
     {
      redirect: noredirect,
      name: 'router-name',
      hidden: true,
      meta: {
        title: 'title',
        icon: 'a-icon',
        keepAlive: true,
        hiddenHeaderContent: true,
      }
    }
    

    API

    { Route } 对象

    参数 说明 类型 默认值
    hidden 控制路由是否显示在 sidebar boolean false
    redirect 重定向地址, 访问这个路由时,自定进行重定向 string -
    name 路由名称, 必须设置,且不能重名 string -
    meta 路由元信息(路由附带扩展信息) object {}
    hideChildrenInMenu 强制菜单显示为Item而不是SubItem(配合 meta.hidden) boolean -

    { Meta } 路由元信息对象

    参数 说明 类型 默认值
    title 路由标题, 用于显示面包屑, 页面标题 *推荐设置 string -
    icon 路由在 menu 上显示的图标 [string,svg] -
    keepAlive 缓存该路由 boolean false
    hidden 用于隐藏菜单时,提供递归到父菜单显示 选中菜单项(可参考 个人页 配置方式) boolean false
    hiddenHeaderContent *特殊 隐藏 PageHeader 组件中的页面带的 面包屑和页面标题栏 boolean false
    permission 与项目提供的权限拦截匹配的权限,如果不匹配,则会被禁止访问该路由页面 array []

    路由自定义 Icon 请引入自定义 svg Icon 文件,然后传递给路由的 meta.icon 参数即可

    请注意 component: () => import('..') 方式引入路由的页面组件为 懒加载模式。具体可以看 Vue 官方文档
    增加新的路由应该增加在 ‘/‘ (index) 路由的 children
    无需控制权限的路由或者需要在未登录情况访问的路由,可以定义在 /src/config/router.config.js 下的 constantRouterMap 属性中
    permission 可以进行自定义修改,只需要对这个模块进行自定义修改即可 src/store/modules/permission.js

    展开全文
  • 笔者这篇文章主要讲解其中的动态路由,如果你是一位前端工程师,我想你会渴望知道其中的代码是如何实现的,如果你是后端工程师,希望我下面的代码不是那么晦涩难懂。另外我很欣赏你爱学习的精神。话不多说下面就是...

    一、背景

    现在很多公司的vue项目都是一套模板加平台配置系统。角色权限、菜单名称、菜单图标都可以在平台配置系统上傻瓜式配置。笔者这篇文章主要讲解其中的动态路由,如果你是一位前端工程师,我想你会渴望知道其中的代码是如何实现的,如果你是后端工程师,希望我下面的代码不是那么晦涩难懂。另外我很欣赏你爱学习的精神。话不多说下面就是干货了~

    二、代码实现

    为了更方便的学习,笔者模拟了后端的接口数据,你可以复制粘贴直接使用~

    export const dynamicRouters = [
      {
        path: '/home', //注意不要重复,唯一!!
        name: 'home', //注意不要重复,唯一!!
        mate: {
          title: '首页',    //这个是菜单项名字
          icon: 'el-icon-s-home', //图标class 可以先不管
        },
        component: "/home/home", 这个是组件路径,正常来说是'@component/home/home'
       }
    ]

    好了拿到数据之后,我们需要在用户登陆成功后动态加入,这里为了方便,不管他是什么角色有什么权限,我都返回上面的路由,如果在业务场景中,你可以让后台根据不同角色返回不同的路由,从而实现权限控制。下面再src下新建一个permission.js文件放入如下代码

    import router from './router'        //默认路由文件,可以放不用权限配置的页面
    import store from './store/store'    // vuex 一般路由数据都存在这里面,为了全局的数据绑定。
    import { dynamicRouters } from "./components/mock.js"  //这里就是后台返回的数据你懂的~
    
    router.beforeEach((to, from, next) => {
      if (sessionStorage.getItem('token')) {    //判断用户是否已经登陆
        if (to.path === '/' && sessionStorage.getItem('token')) {
          next({ path: '/home' })
        } else {
          if (store.getters.menuRouter.length === 0) {    //这里判断下vuex中是否有了动态路由数据
            store.dispatch('SET_MENU_ROUTER', dynamicRouters).then(() => { //这里对后台数据做处理
              router.addRoutes(store.getters.menuRouter)    //关键看这里 取出后台数据,把数据从这加入
              next({ path: to.path === '/home' ? '/home' : to.path })
            })
          } else {
            next();
          }
        }
      } else {
        next();
      }
    })

    注意还没完,上面我们执行store.dispath('SET_MENU_ROUTER',dynamicRouters)方法对数据进行了处理,你也需要,代码如下

    //这里是vuex的内容,我默认你是会的~~
    const importRouter = (url) => {
      return () => import('@/components' + url)    //这里把真实路径补正确
    }
    
    function filterAsyncRouter(asyncRouterMap) {    //递归处理路由懒加载
      const accessedRouters = asyncRouterMap.filter(route => {
        route.component = importRouter(route.component)
        if (route.children && route.children.length) {
          route.children = filterAsyncRouter(route.children)
        }
        return true
      })
    
      return accessedRouters
    }
    const state = {
      menuRouter: [],        // 存储路由
    }
    const getters = {
      menuRouter: (state) => {
        return state.menuRouter    //返回给addRouter使用
      },
    }
    const mutations = {
      setMenuRouter(state, menuRouter) {
        state.menuRouter = menuRouter    // 设置存储
      },
    }
    const actions = {
      SET_MENU_ROUTER({ commit }, menuRouter) {
        return new Promise(resolve => {
          const accessedRouters = filterAsyncRouter(menuRouter) //调用
          // console.log(accessedRouters);
          commit('setMenuRouter', accessedRouters)    //调用mutations中的方法,你懂的~
          resolve()    //回调实现
        })
      },
    }

    搞定!

    展开全文
  • 需求:根据登录用户的权限,显示不同导航菜单也,同时操作不同的界面。 (1)首先在本地配置好固定不变的路由地址,例如登录,首页这些页面,如下: import Vue from 'vue' import Router from 'vue-router' ...
  • 前言 在我们做一个管理系统的时候,一般比较重要也是最基础的地方就是权限管控这部分。 权限管理在来说基本有两个方面: ... 2、动态添加只在权限内的菜单路由,当用户输入url绕过菜单时,显示404页...
  • 这里感谢router新加的addRoute...在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息 const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRou
  • https://www.bilibili.com/video/BV1zJ411g7Fx不敢说他教的有多好,但是他的教学内容很接近实际开发了,其中就包含了动态路由。 前期很迷茫,看了许许多多的博客帖子,基本上所有的教程都围绕这一页面...
  • Vue 动态路由和权限菜单实现思路

    千次阅读 2019-07-09 16:53:59
    为什么不贴代码详细说而是只讲思路呢——对,因为我懒……实际上动态菜单动态路由的思路还是比较简单的,只是平日只在路由文件里配静态路由什么都不需要多考虑的,一上来可能会有点懵逼,当然这里边也多少有点小坑...
  • vue router 动态路由菜单实现之一

    千次阅读 2020-11-05 09:00:15
    之前将路由引入,按模块简单...vue router 动态路由实现 router.addRoutes 要动态添加路由,主要用到的方法就是router.addRoutes 但这个方法在官方api的解释: 没错,就是这么简单,这个看第一眼就知道要苦了。但该用
  • 2、将后端返回的json数据动态添加到当前路由中。 3、菜单组件获取store中的数据来渲染菜单。 后端JSON保存 使用mockjs,模拟直接返回json报文 main.js 引入mock //mock测试引入 import './mock/mock.js' 配置请求...
  • vue动态路由

    2021-01-19 18:57:18
    VUE动态路由vue动态路由先看实现数据库数据格式表数据后端代码实现组装菜单格式数据前端代码实现前端目录结构紧接着登录成功后菜单页渲染大功告成 vue动态路由 之前一直被动态路由这个问题所困扰, 现在终于实现了,...
  • 本篇文章主要介绍了vue addRoutes实现动态权限路由菜单的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue + addRouters 实现动态路由菜单

    千次阅读 2020-02-20 16:08:16
    动态路由这个功能呢,其实说简单也简单,说难也有点难度。 上代码

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 302
精华内容 120
关键字:

vue动态路由实现菜单

vue 订阅