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)

 

 第三步：在页面渲染

<template>
  <div class="left-menu">
    <el-menu
      :default-active="$route.path"
      unique-opened
      router
      class="menu"
    >
      <template v-for="item in menus">
        <!-- 没子菜单 -->
        <el-menu-item
          :index="item.meta.path"
          v-if="item.children.length === 1"
          :key="item.meta.path"
        >
          <i class="iconfont icon-home"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 有子菜单 -->
        <el-submenu :index="item.meta.path" v-else :key="item.meta.title">
          <template slot="title">
            <i class="iconfont icon-total"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item
            v-for="subItem in item.children"
            :key="subItem.meta.path"
            :index="subItem.meta.path"
            >{{ subItem.meta.title }}</el-menu-item
          >
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [] //菜单
    }
  },
  created() {
    //初始化获取本地菜单 赋值
    this.menus = localStorage.getItem('menus');
    // console.log(`this.menus`, this.menus)
  }
}
</script>