admin管理员组

文章数量:1633923

这里感谢router新加的addRoute(route:Array)方法，让我们可以进行相关的路由权限的配置。
路由的权限配置这里我介绍一下结合后端的方法。

  1. 首先我们需要对于路由信息进行数据库的存储，通过后端进行路由的权限控制
  2. 在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息
const router = new Router({
   
  mode: 'hash',
  scrollBehavior: () => ({
    y: 0 }),
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)  // 全局路由拼接动态路由
})
 // 在路由跳转前进行判断
router.beforeEach((to, from, next) => {
   
  // 添加动态(菜单)路由
  // 1. 已经添加 or 全局路由, 直接访问
  // 2. 获取菜单列表, 添加并保存本地存储
  let token = Vue.cookie.get('token')
  // 这里定义一个动态路由的属性用来判断是否已经添加
  if (router.options.isAddDynamicMenuRoutes || routerType(to) === 'global') {
   
    next()
  } else {
   
    if (!token || !/\S/.test(token)) {
   
      next({
    name: 'login' })

本文标签： 路由菜单动态vue

版权声明：本文标题：Vue实现动态路由菜单配置 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729177268a1188876.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。