laravel - how vue-router loads routes asynchronously

Question

Current project user permission dependencies:

• Basic User Permissions

• Permissions of your department

• Permissions for your position

• User special permissions

Because the permissions are more complicated, if the routing is hard-coded on the front end, then an ordinary employee will have to load hundreds or even thousands of routes and corresponding components after logging in.

1. Performance issues

2. Both the front and backends need to verify permissions. Thinking of this gives me a headache

Based on these two considerations, it was decided to write the routes in the database, and then the backend dynamically allocates routes to the frontend for loading based on the permissions of the logged in user.

But when I use ajax to request on the front end, I find that routing data is always requested from the background after vue initialization is completed (that is, the route has been loaded)

The requested code is placed the same in main.js and beforeCreate of the vue life cycle

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

Please answer from the front-end master!

Answer 1

vue-router@2.2.0 starts, router.addRoute(routes)dynamically adds routes

Answer 2

Use axios to first request the routing configuration via ajax and then initialize the vue entity