perdirjs/src/router.js

根据权限判断元素的展示与否的自定义指令

import Vue from "vue"
import Router from "vue-router"
import store from './store'
Vue.use(Router)
const router = new Router({
  mode: "history",
  // base: pcPath,
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/index'
    },
    {
      path: "/home",
      name: "home",
      component: () => import("./views/home"),
      children: [
        {
          path: "/test",
          name: "test",
          component: () => import("./views/test.vue"),
          meta: {
            title: "test组件",
            roleId: 5
          }
        },
        {
          path: "/index",
          name: "index",
          component: () => import("./views/index.vue"),
          meta: {
            title: "index组件",
            roleId: 2
          }
        },
      ]
    }
  ]
})
router.beforeEach((to, from, next) => {
  const reads = store.state.permissionJson.read
  if (to.meta && to.meta.roleId && from.name) {
    // 判断跳转过去的路由是否有权限 判断是不是第一次进入页面 还没有进行权限接口加载
    if (reads.indexOf(to.meta.roleId) === -1) {
      console.log("暂无当前页面的权限！")
      // 没有权限的时候判断从哪跳过来，没有的话跳转到默认的首页
      if (from.name) {
        next({ path: from.path })
      } else {
        next({ path: '/index' })
      }
    } else {
      next()
    }
  } else {
    next()
  }
})
export default router