laravel - comment vue-router charge les routes de manière asynchrone

Question

Dépendances des autorisations des utilisateurs du projet actuel :

• Autorisations utilisateur de base

• Autorisations de votre département

• Autorisations de votre poste

• Autorisations utilisateur spéciales

Les autorisations étant compliquées, si les itinéraires sont codés en dur sur le front-end, un employé ordinaire devra alors charger des centaines, voire des milliers d'itinéraires et des composants correspondants après s'être connecté.

1. Problèmes de performances

2. La vérification des autorisations est requise à la fois sur le front-end et sur le back-end. Penser à cela me donne mal à la tête

.

Sur la base de ces deux considérations, nous avons décidé d'écrire les routes dans la base de données, puis le backend alloue dynamiquement les routes au frontend pour le chargement en fonction des autorisations de l'utilisateur connecté.

Mais lorsque j'utilise ajax pour demander sur le front-end, je constate que les données de routage sont toujours demandées en arrière-plan une fois l'initialisation de la vue terminée (c'est-à-dire que la route a été chargée)

Le code demandé est placé de la même manière dans main.js et avant la création du cycle de vie de la vue

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

Veuillez demander des réponses au maître front-end !

Answer 1

vue-router@2.2.0 démarre, router.addRoute(routes)ajoute dynamiquement des routes

Answer 2

Utilisez axios pour demander d'abord la configuration du routage via ajax puis initialisez l'entité vue