vue中设置中公共路由和根据权限添加的路由

最新推荐文章于 2024-08-23 14:00:00 发布
最新推荐文章于 2024-08-23 14:00:00 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/he1234555/article/details/115802031
版权 
/* 
  publicRoutes  默认公共路由，不需要权限的路由
  roleRoutes   根据权限添加的路由，添加规则如下

    1、没有meta标签的代表所有权限都可以访问
      有meta标签的，根据role数组，例如下面
      meta: {
        role: ['a', 'b']
      },
      代表只有a，b两个权限的人可以访问
*/

公共路由

// 公共路由
let publicRoutes = [{
    path: '/login',
    name: 'login',
    component: () => import('@/view/login')
  },
  //这个是首页
  {
    path: '/',
    name: '',
    component: home,
    redirect: '/map/index',
  }
  , 
  // 这个是矿井选择
  {
    path: '/select',
    name: 'select',
    component: home,
    icon: '类目 品类 分类 类别',
    children: [{
      path: '/map/index',
      alias: '/map',
      name: 'select1',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/select/select.vue'),
      }
    },
    {
      path: '/First/page1',
      alias: '/First',
      name: 'Firstpage1',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page1.vue'),
      },
      meta: {
        role: ['a']
      },
    }, 
    {
      path: '/First/page2',
      name: 'Firstpage2',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page2.vue'),
      },
      meta: {
        role: ['a']
      },
    },
    {
      path: '/First/page3',
      name: 'Firstpage3',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page3.vue'),
      },
      meta: {
        role: ['a']
      },
    }
    
  ]
  },

根据权限添加的路由


//根据权限添加的路由
let roleRoutes = [
  //把First设置为私有路由

  //
  {
    path: '/First',
    name: 'First',
    component: home,
    icon: '类目 品类 分类 类别',
    meta: {
      role: ['d', 'd']
    },
    children: [{
      path: '/First/page1',
      alias: '/First',
      name: 'Firstpage1',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page1.vue'),
      },
      meta: {
        role: ['a']
      },
    }, 
    {
      path: '/First/page2',
      name: 'Firstpage2',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page2.vue'),
      },
      meta: {
        role: ['a']
      },
    },
     {
      path: '/First/page3',
      name: 'Firstpage3',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page3.vue'),
      },
      meta: {
        role: ['a']
      },
    }
  ]
  },
//   {
//   path: '/Second',
//   name: 'Second',
//   component: home,
//   icon: '类目 品类 分类 类别 (1)',
//   //这里修改了显示了只有三个了   哈哈哈
//   meta: {
//     role: ['a']
//   },
//   children: [{
//     path: '/Second/page1',
//     alias: '/Second',
//     name: 'Secondpage1',
//     icon: '类目 品类 分类 类别',
//     components: {
//       default: () => import('@/view/Second/page1.vue'),
//     },
//   }, {
//     path: '/Second/page2',
//     name: 'Secondpage2',
//     icon: '类目 品类 分类 类别',
//     components: {
//       default: () => import('@/view/Second/page2.vue'),
//     },
//     meta: {
//       role: ['b']
//     },
//   }, {
//     path: '/Second/page3',
//     name: 'Secondpage3',
//     icon: '类目 品类 分类 类别',
//     components: {
//       default: () => import('@/view/Second/page3.vue'),
//     },
//     meta: {
//       role: ['b']
//     },
//   }]
// },
// 这是第三个默认a，c能进
{
  path: '/Third',
  name: 'Third',
  component: home,
  icon: '类目 品类 分类 类别 (2)',
  meta: {
    role: ['a', 'c']
  },
  children: [{
    path: '/Third/page1',
    alias: '/Third',
    name: 'Thirdpage1',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Third/page1.vue'),
    },
    meta: {
      role: ['a']
    },
  }, {
    path: '/Third/page2',
    name: 'Thirdpage2',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Third/page2.vue'),
    },
    meta: {
      role: ['c']
    },
  }, {
    path: '/Third/page3',
    name: 'Thirdpage3',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Third/page3.vue'),
    },
    meta: {
      role: ['c']
    },
  }]
},

完整代码

import Vue from 'vue'
import Router from 'vue-router'
import home from '../view/home'
import store from '../store';


/* 
  publicRoutes  默认公共路由，不需要权限的路由
  roleRoutes   根据权限添加的路由，添加规则如下

    1、没有meta标签的代表所有权限都可以访问
      有meta标签的，根据role数组，例如下面
      meta: {
        role: ['a', 'b']
      },
      代表只有a，b两个权限的人可以访问
*/
Vue.use(Router)
// 公共路由
let publicRoutes = [{
    path: '/login',
    name: 'login',
    component: () => import('@/view/login')
  },
  //这个是首页
  {
    path: '/',
    name: '',
    component: home,
    redirect: '/map/index',
  }
  , 
  // 这个是矿井选择
  {
    path: '/select',
    name: 'select',
    component: home,
    icon: '类目 品类 分类 类别',
    children: [{
      path: '/map/index',
      alias: '/map',
      name: 'select1',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/select/select.vue'),
      }
    },
    {
      path: '/First/page1',
      alias: '/First',
      name: 'Firstpage1',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page1.vue'),
      },
      meta: {
        role: ['a']
      },
    }, 
    {
      path: '/First/page2',
      name: 'Firstpage2',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page2.vue'),
      },
      meta: {
        role: ['a']
      },
    },
    {
      path: '/First/page3',
      name: 'Firstpage3',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page3.vue'),
      },
      meta: {
        role: ['a']
      },
    }
    
  ]
  },
  // 这个是First 这个是公共路由
  // {
  //   path: '/First',
  //   name: 'First',
  //   component: home,
  //   icon: '类目 品类 分类 类别',
  //   children: [{
  //     path: '/First/page1',
  //     alias: '/First',
  //     name: 'Firstpage1',
  //     icon: '类目 品类 分类 类别',
  //     components: {
  //       default: () => import('@/view/First/page1.vue'),
  //     }
  //   }, 
  //   {
  //     path: '/First/page2',
  //     name: 'Firstpage2',
  //     icon: '类目 品类 分类 类别',
  //     components: {
  //       default: () => import('@/view/First/page2.vue'),
  //     },
  //   }, {
  //     path: '/First/page3',
  //     name: 'Firstpage3',
  //     icon: '类目 品类 分类 类别',
  //     components: {
  //       default: () => import('@/view/First/page3.vue'),
  //     },
  //   }]
  // }
]

//根据权限添加的路由
let roleRoutes = [
  //把First设置为私有路由

  //
  {
    path: '/First',
    name: 'First',
    component: home,
    icon: '类目 品类 分类 类别',
    meta: {
      role: ['d', 'd']
    },
    children: [{
      path: '/First/page1',
      alias: '/First',
      name: 'Firstpage1',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page1.vue'),
      },
      meta: {
        role: ['a']
      },
    }, 
    {
      path: '/First/page2',
      name: 'Firstpage2',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page2.vue'),
      },
      meta: {
        role: ['a']
      },
    },
     {
      path: '/First/page3',
      name: 'Firstpage3',
      icon: '类目 品类 分类 类别',
      components: {
        default: () => import('@/view/First/page3.vue'),
      },
      meta: {
        role: ['a']
      },
    }
  ]
  },
//   {
//   path: '/Second',
//   name: 'Second',
//   component: home,
//   icon: '类目 品类 分类 类别 (1)',
//   //这里修改了显示了只有三个了   哈哈哈
//   meta: {
//     role: ['a']
//   },
//   children: [{
//     path: '/Second/page1',
//     alias: '/Second',
//     name: 'Secondpage1',
//     icon: '类目 品类 分类 类别',
//     components: {
//       default: () => import('@/view/Second/page1.vue'),
//     },
//   }, {
//     path: '/Second/page2',
//     name: 'Secondpage2',
//     icon: '类目 品类 分类 类别',
//     components: {
//       default: () => import('@/view/Second/page2.vue'),
//     },
//     meta: {
//       role: ['b']
//     },
//   }, {
//     path: '/Second/page3',
//     name: 'Secondpage3',
//     icon: '类目 品类 分类 类别',
//     components: {
//       default: () => import('@/view/Second/page3.vue'),
//     },
//     meta: {
//       role: ['b']
//     },
//   }]
// },
// 这是第三个默认a，c能进
{
  path: '/Third',
  name: 'Third',
  component: home,
  icon: '类目 品类 分类 类别 (2)',
  meta: {
    role: ['a', 'c']
  },
  children: [{
    path: '/Third/page1',
    alias: '/Third',
    name: 'Thirdpage1',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Third/page1.vue'),
    },
    meta: {
      role: ['a']
    },
  }, {
    path: '/Third/page2',
    name: 'Thirdpage2',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Third/page2.vue'),
    },
    meta: {
      role: ['c']
    },
  }, {
    path: '/Third/page3',
    name: 'Thirdpage3',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Third/page3.vue'),
    },
    meta: {
      role: ['c']
    },
  }]
}, 
{
  path: '/Fourth',
  name: 'Fourth',
  component: home,
  icon: '类目 品类 分类 类别 (1)',
  meta: {
    role: ['b']
  },
  children: [{
    path: '/Fourth/page1',
    alias: '/Fourth',
    name: 'Fourthpage1',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Fourth/page1.vue'),
    },
  }, {
    path: '/Fourth/page2',
    name: 'Fourthpage2',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Fourth/page2.vue'),
    },
  }, {
    path: '/Fourth/page3',
    name: 'Fourthpage3',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Fourth/page3.vue'),
    },
  }]
}, 
{
  path: '/Fifth',
  name: 'Fifth',
  component: home,
  icon: '类目 品类 分类 类别 (1)',
  meta: {
    role: ['c']
  },
  children: [{
    path: '/Fifth/page1',
    alias: '/Fifth',
    name: 'Fifthpage1',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Fifth/page1.vue'),
    },
  }, {
    path: '/Fifth/page2',
    name: 'Fifthpage2',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Fifth/page2.vue'),
    },
  }, {
    path: '/Fifth/page3',
    name: 'Fifthpage3',
    icon: '类目 品类 分类 类别',
    components: {
      default: () => import('@/view/Fifth/page3.vue'),
    },
  }]
}, {
  path: '*',
  component: () => import('@/view/404')
}]

let router = new Router({
  routes: publicRoutes,
})

router.beforeEach((to, from, next) => {
  let token = store.getters.token,
    role = store.getters.role;
  if (!token && to.name !== 'login') {
    next({
      path: 'login'
    })
  } else {
    next()
  }
})

export default router
export {
  publicRoutes,
  roleRoutes
}
时间不会赖着不走
关注
专栏目录
VUE路由详解
peter__xu的博客
08-04 1973
目录一、路由的概念二、事前准备三、 路由的相关知识点3.1 路由的基本认识3.2 路由小案例3.3 路由模式的切换3.4 指定路由的渲染位置3.5 声明式导航3.5.1 无参模式3.5.2 传参模式3.5.3 $route 与$router的区别3.6 编程式导航3.6.1 第一种get方式3.6.2 第二种get方式3.6.3 post传参方式3.6.4 常见BUG3.7 路由重定向3.7.1 概念3.7.2 代码演示。
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
在vue路由上添加公共的路由前缀
多看书少吃饭的博客
09-05 5760
在vue路由上添加公共的路由前缀
Vue 路由配置详解
最新发布
weixin_58462329的博客
08-23 299
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 核心深度集成，让构建单页面应用变得易如反掌。本文将详细介绍 Vue 路由配置的基本概念和高级用法。
vue-router 配置根路径， publicPath & base
萝卜芹菜芽
06-18 5296
vue.config.js 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' 配置 publicPath module.exports = { publicPath: isProduction ? 'portal' : '/' }
在vue路由上添加公共的路由前缀（vite配置）
weixin_56166823的博客
06-01 2464
【代码】在vue路由上添加公共的路由前缀（vite配置）
vue项目总结——公共路由与导航守卫
weixin_39944458的博客
03-19 662
以前vue框架做的项目，因为前期的配置工作是别人写好的，就直接拿来用，现在整理一下。 1.路由的配置是在router文件夹下的js文件，项目中经常有一些公共的页面，比如错误页面、空白页面等，就需要有一个公共路由配置文件。 然后在需要的路由配置文件引入公共路由 2.导航守卫：路由跳转前做一些验证，比如登录验证（未登录去登录页，已登录的去首页），路由匹配不到去错误页面等 好了，完...
使用Vue cli脚手架实现公共路由，例如菜单栏为公共部分
小爽帅到拖网速的博客
12-05 613
需求分析 在实际的vue开发中，我们想实现点击header菜单栏组件中的某一个选择，在跳转到该路由的同时，菜单栏依旧存在，且被点击的菜单选项为active状态 例如图1，我们想点击用户管理时，跳转到用户管理的路由，并保持菜单栏不变，我们并不希望出现像图2这样的效果 图1 图2 解决方法 在App.vue(webpack自动创建好的，原本保存的是Vue的logo)中编写我们需要保存的公共组件，并把原来的标签去除，放在我们的菜单栏中，示例代码如下： <template> <div id
vue实现权限控制路由(vue-router 动态添加路由)
10-16
在Vue.js应用程序中，权限控制路由是一种常见的需求，它允许我们根据用户的权限来决定他们可以访问哪些页面。Vue Router是Vue.js官方的路由管理器，它提供了强大的功能，包括动态添加路由。下面我们将深入探讨如何...
vue 设置路由的登录权限的方法
08-27
在 Vue 应用程序中，设置路由的登录权限是一个非常重要的安全性考虑。通过设置路由的登录权限，可以确保只有经过身份验证的用户才能访问特定的路由，从而保护应用程序的安全性。本文将介绍 Vue 设置路由的登录权限的...
基于vue3 用vuex状态控制路由和按钮的权限
11-20
1. **计算属性**：Vue组件内，我们可以利用计算属性根据Vuex store中的权限状态动态控制按钮的显示和禁用。 2. **条件渲染**：借助Vue的条件渲染指令（如`v-if`），我们可以根据用户权限决定是否渲染某个按钮或展示...
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
10-16
总结来说，使用VueRouter的`addRoutes`方法实现动态添加权限路由，关键在于定义好动态路由和默认路由，通过Vuex状态管理用户的权限信息，并在用户登录后通过Vuex的`actions`方法动态地添加权限路由。这种实现方式...
Vue-router配置公共头部、尾部
weixin_42080056的博客
09-26 1759
近半年一直在写react，但对Vue的热爱种种不能忘怀，这不昨天群里有小伙伴问到了关于vue-router的一些问题，于是我自己又搭建了一遍，突然就想到了一个问题，今天分享给大家。 相信很多大神在搭建框架的时候都遇到过一个问题，拿PC来说，一般头部都是公共的，你是如何处理？单写一个template作为公共模板？各个页面引用？还是直接在App.vue里面构建出公共的头部和底部，导航用router来......
Vue Router 相关理解 基本路由 多级路由
weixin_44230693的博客
06-27 597
Vue Router 相关理解 基本路由 多级路由
Vue路由添加公共参数
Mervyn的博客
03-25 2985
Vue路由添加公共参数 如Vue-Router介绍所说，router.beforeEach是路由跳转前的钩子，需要增加公共参数可以在这里处理。 In that case, you must call next exactly once in any given pass through a navigation guard. router.beforeEach中第三个参数next，必须在每一种给定的导航中严格执行一次。 执行分两种情况 next()，这种情况不再执行前置钩子 next('/')，这种情
vue的公共组件，路由跳转的写法
youshuang1207的博客
11-16 659
路由及权限
weixin_43909743的博客
10-26 4437
导引 对于cms、hrm、OA等系统开发，通常会有不同权限访问页面限制的问题，不同的身份的人，进入到系统之后，可以看到不同的菜单，进入不同的路由页面。 思路 用户登陆成功，后端接口会返回角色( 普通管理员，超级管理员) ，不同的角色可以访问不同的页面。 思路： （1）对所有的路由页面分成两类： 公共的，不需要权限即可访问 动态的，只针对不同的权限显示。 提前把所有页面所有可访问条件全部设置。 （2） 当登陆成功之后，获取当前用户的角色，去路由配置中，动态分析，创建当前用户可以访问的路由匹配，保存v
vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
热门推荐
qq_31906983的博客
04-06 1万+
工作中我们经常会遇到这种需求，后台定义用户的权限数据，前端进行获取，并渲染在侧边栏导航上，不同权限的用户看到的侧边栏是不同的。即前端渲染的数据是随着后台的改变而改变的，做到真正的前后端分离。 一、拿到需要动态添加的路由表 我们的思路是： 登录(login，所有人均可见)--------->登录成功，获取权限-------->权限不同，侧边栏的数据展示不同 先定义一份公共的路由表...
Vue学习日记之vue-router
qq_124917348的博客
07-13 292
1、Vue-router的基本使用 创建一个vue-router对象routerObj 在这个对象中配置对象，使用routes创建一组路由规则，{path:"url",component:组件名} 编写匹配该url后要展示的组件对象，这个组件对象必须是一个全局对象，无需注册 在Vue实例中添加router对象，形式为：router:'routerObj' ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时间不会赖着不走

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值