vue2动态权限路由设置

1.asyncRoute.js

/**
 * 当前文件保存已经写好的页面组件
 */

const aysncRoutes = {
  PageA: () => import('../views/PageA/index.vue'),
  PageB: () => import('../views/PageB/index.vue'),
  PageC: () => import('../views/PageC/index.vue'),
  PageD: () => import('../views/PageD/index.vue'),
  PageE: () => import('../views/PageE/index.vue'),
  PageF: () => import('../views/PageF/index.vue')
}
export default aysncRoutes

2. router/index.js

// @ts-nocheck
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import ErrorPage from '../views/ErrorPage/404.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },

  {
    path: '*',
    name: '404',
    component: ErrorPage
  }
]

const router = new VueRouter({
  routes
})

export default router

3. mock数据

[
  {
    "path": "/a",
    "name": "PageA",
    "component": "PageA",
    "children": [
      {
        "name": "PageA01",
        "path": "aa",
        "component": "PageB"
      }
    ]
  },
  {
    "path": "/b",
    "name": "PageB",
    "component": "PageB"
  },
  {
    "path": "/c",
    "name": "PageC",
    "component": "PageC"
  },
  {
    "path": "/d",
    "name": "PageD",
    "component": "PageD"
  },
  {
    "path": "/e",
    "name": "PageE",
    "component": "PageE"
  },
  {
    "path": "/f",
    "name": "PageF",
    "component": "PageF"
  }
]

4. 在合适的时机去添加路由

<script>
import axios from 'axios'
import router from './router/index'
import aysncRoutes from './router/asyncRoute'

function formatRoutes (routes, routeMap) {
  routes = JSON.parse(JSON.stringify(routes))
  const result = []
  if (routes && routes.length) {
    routes.forEach(item => {
      item.component = routeMap[item.component]
      result.push(item)
      if (item.children && item.children.length) {
        item.children = formatRoutes(item.children, routeMap)
      }
    })
  }
  return result
}

export default {
  data () {
    return { count: 0 }
  },
  methods: {
    loadData () {
      axios.get('/user/permission').then(res => {
        const route = formatRoutes(res.data, aysncRoutes)
        route.forEach(item => {
          router.addRoute(item)
        })
      })
    }
  },
  created () {
    setTimeout(() => {
      this.loadData()
    }, 0)
  }
}
</script>