Laravel – wie Vue-Router Routen asynchron lädt

Question

Aktuelle Projektbenutzerberechtigungsabhängigkeiten:

• Grundlegende Benutzerberechtigungen

• Berechtigungen Ihrer Abteilung

• Berechtigungen Ihrer Position

• Spezielle Benutzerberechtigungen

Da Berechtigungen kompliziert sind und die Routen im Frontend fest codiert sind, muss ein normaler Mitarbeiter nach der Anmeldung Hunderte oder sogar Tausende von Routen und entsprechenden Komponenten laden.

1. Leistungsprobleme

2. Eine Berechtigungsüberprüfung ist sowohl im Frontend als auch im Backend erforderlich. Der Gedanke daran bereitet mir Kopfschmerzen

Basierend auf diesen beiden Überlegungen haben wir beschlossen, die Routen in die Datenbank zu schreiben, und dann weist das Backend basierend auf den Berechtigungen des angemeldeten Benutzers Routen dynamisch dem Frontend zum Laden zu.

Aber wenn ich Ajax zum Anfordern im Frontend verwende, stelle ich fest, dass Routing-Daten immer aus dem Hintergrund angefordert werden, nachdem die Vue-Initialisierung abgeschlossen ist (d. h. die Route wurde geladen)

Der angeforderte Code wird auf die gleiche Weise in main.js und vor dem Erstellen des Vue-Lebenszyklus platziert

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

Bitte fragen Sie den Front-End-Master nach Antworten!

Answer 1

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

Answer 2

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