laravel - vue-router如何异步加载路由
PHPz
PHPz 2017-05-16 16:48:20
0
2
796

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

  • 用户基础权限

  • 所在部门的权限

  • 所在岗位的权限

  • 用户特殊权限

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

  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)
            })
    }
})

求前端大神解答!

PHPz
PHPz

学习是最好的投资!

全部回复(2)
phpcn_u1582

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

滿天的星座

使用axios 先ajax请求得到路由配置 再初始化vue实体

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!