search

Home  >  Q&A  >  body text

laravel - how vue-router loads routes asynchronously

Current project user permission dependencies:

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!

PHPzPHPz2818 days ago854

reply all(2)I'll reply

  • phpcn_u1582

    phpcn_u15822017-05-16 16:50:20

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

    reply
    0
  • 滿天的星座

    滿天的星座2017-05-16 16:50:20

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

    reply
    0
  • Cancelreply