vue.js - vue-router如何异步加载路由

问题描述

问 题

当前项目用户权限依赖关系：

• 用户基础权限

• 所在部门的权限

• 所在岗位的权限

• 用户特殊权限

因为权限比较复杂如果将路由在前端写死的话，那么一个普通员工登录后也要加载几百甚至上千个路由及对应的组件。

1. 性能问题

2. 前后端都要做权限验证，想到这个就头疼

基于这两项考虑，决定将路由写在数据库中，然后后端根据登录用户的权限动态分配路由给前端加载。

但是我在前端用ajax请求的时候，发现总是在vue初始化完成后（也就是说路由已经加载了）才向后台请求路由数据

请求的代码放在main.js和vue生命周期的beforeCreate中都一样

const routes = [];

const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes
})

const app = new Vue({
    router,
    el: '#app',
    data: routes,
    template: '<App/>',
    components: { App },
    created: function () {
        const self = this
        axios.get('https://service.it/api/routes')
            .then(function (response) {
                self.routes = response.data;
            })
            .catch(function (error) {
                console.log(error)
            })
    }
})

求前端大神解答！

解决方案

vue-router@2.2.0开始，router.addRoute(routes)动态添加路由

这篇关于vue.js - vue-router如何异步加载路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！