vue路由权限

路由配置 路由一分为3： 静态路由【所有人都可以看】 动态路由【需要计算权限的】 错误路由【地址出错进入】 静态路由

定义的静态路由直接使用

例如：

/* 静态路由 */
const routes = [
  {
    path: '/login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

动态路由

通过登录后的权限判断是否拥有权限，然后使用router.addRoutes添加路由

注意：addRoutes方法只能使用一次

例如：

//添加路由  把 计算出结果的动态路由 错误路由添加至路由。现在就可以访问了！
  router.addRoutes([需要添加的路由]);

错误路由

当用户输入的地址没有权限或者不存在是进入

例如：

/* 创建错误路由 */
const errorRoutes = [
  {
    path: '*',
    redirect: '/error'  // 重定向到错误路由
  },
  {
    path: '/error',
    component: () => import('路径')
  }
]


/* 错误路由写在所有路由后面 逻辑：前面的所有路由都不匹配时才通过“*”判断进入自定义404页面 */

/* 如果没有动态路由可以直接使用 */
const router = new VueRouter({
  routes, // 普通路由
  errorRoutes // 错误路由
})


/* 如果有动态路由时，在通过先把动态路由展开再展开错了路由，然后使用addRoutes方法添加 */
//添加路由  把 计算出结果的动态路由 错误路由添加至路由。现在就可以访问了！
router.addRoutes([...accessRoutes, ...errorRoutes]);

菜单配置

不同权限的用户展示不同的路由

第一步：给路由添加自定义属于用于判断是否是菜单

例如：

const dynamicRoutes = [
  /* 订单管理 */
  {
    path: '/order',
    component: Layout,
    isMenu: true,// 用于判断是否是菜单
    meta: { path: '/order', title: '订单管理' },
    children: [
      {
        path: '',
        component: () => import('@/views/order/Order.vue')
      }
    ]
  },
]

 第二步：筛选出属于菜单的路由并存储

const isMenu = routes => routes.filter(v => v.isMenu)
  //把属于菜单的路由 存入本地
let menus = isMenu([...routes, ...accessRoutes])

localStorage.setItem('menus', menus)

 

 第三步：在页面渲染