element-admin-template模板项目动态添加路由

最近项目要求鲁有需要动态获取，从后端返回数据进行处理。我的项目模板是基于element-damin-template的。官方文档也有介绍

https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E9%80%BB%E8%BE%91%E4%BF%AE%E6%94%B9

通常的路由使我们自己在router/index里面自己定义的路由，写死的一些路由，这些路由在加载时如果不做处理就会直接全部加载，而后台数据一般我们需要做权限控制。一般来说都是需要后台返回我们这个账号所能展示的路由，由我们动态加载。

首先，我们需要后端接口，携带这些权限路由信息。
其次，我们要想办法加载到我们的router中。

1. 在我们的router路由表中定义我们的公共路由：

import Layout from '@/layout/index'
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export const constantRoutes = [

    // 登录页
    {
        path: '/login',
        component: (resolve) => require(['@/views/login/index'], resolve),
        hidden: true
    },



    // 首页
    {
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        children: [{
            path: 'dashboard',
            name: 'Dashboard',
            component: (resolve) => require(['@/views/dashboard/index'], resolve),
            meta: { title: '首页', affix: true }
        }]
    },
    //报错页面
    {
        path: '/404',
        component: (resolve) => require(['@/views/404'], resolve),
        hidden: true
    },
]

const createRouter = () => new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})

const router = createRouter()


export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher 

}
router.$addRoute