[Vue] vue-Router pour Family Bucket

aperçu

routage back-end

1. Selon les différentes requêtes URL des utilisateurs, différents contenus sont renvoyés, qui correspondent essentiellement à la correspondance entre les adresses de requête URL et les ressources du serveur.

2. Cependant, il existe des problèmes de performances dans le rendu back-end.

routage frontal

3. Il existe donc un rendu de pré-édition Ajax. Le rendu frontal peut améliorer les performances, mais il ne prend pas en charge les opérations avant et arrière du navigateur.

4. À cette époque, le programme d'application monopage SPA (Single Page Application) est réapparu. L'ensemble du site Web n'a qu'une seule page. Le changement de contenu est réalisé via une mise à jour partielle Ajax et prend en charge les opérations avant et arrière du navigateur. barre d'adresse.

5. L'un des principes de mise en œuvre du SPA est basé sur le hachage de l'adresse URL (le changement du hachage amènera le navigateur à enregistrer la modification de l'historique des accès, mais le changement du hachage ne déclenchera pas une nouvelle demande d'URL) . Dans le processus de mise en œuvre de SPA, le point technique principal est le routage frontal.

6. Le routage frontal consiste à afficher différents contenus de page en fonction de différents événements utilisateur. L'essence est la correspondance entre les événements utilisateur et les fonctions de traitement des événements.

Vue Router

Voici le lien de la documentation officielle

Vue Router est le gestionnaire de routage officiel de Vue.js. Il est profondément intégré au cœur de Vue.js et peut être très facilement utilisé pour le développement d'applications SPA.

Il fonctionne comme suit :

1. Prend en charge le mode historique HTML5 ou le mode hachage.
2. Prise en charge du routage imbriqué.
3. Prise en charge des paramètres de routage.
4. Prise en charge du routage programmatique.
5. Prise en charge du routage nommé.

Installer

npm install vue-router --save

Utilisation courante de vue-router

Chargement paresseux de routage

La méthode de chargement paresseux des itinéraires

Méthode 1 : combiner les composants asynchrones de Vue et l'analyse de code de Webpack

const Home = resolve => {
    
     require. ensure(['../ components/Home.vue'], () => {
    
     resolve(require('../ components/Home.vue')) })};

Méthode 2 : méthode d'écriture AMD

const About = resolve => require([' ../ components/ About.vue'], resolve);

Méthode 3 : Dans ES6, nous pouvons avoir un moyen plus simple d'organiser le fractionnement du code des composants asynchrones Vue et Webpack

const Home = () => import(' . ./ components/Home.vue ' )

L'effet du chargement paresseux des itinéraires :

redirection d'itinéraire

La redirection de routage fait référence à : lorsqu'un utilisateur accède à l'adresse A, l'utilisateur est obligé de passer à l'adresse C pour afficher une page de composant spécifique.

En spécifiant une nouvelle adresse de routage via l'attribut redirect de la règle de routage, vous pouvez facilement définir la redirection de routage :

lorsque le hachage est /, il passera au composant home par défaut, empêchant que rien ne s'affiche lorsque le hachage est /, et la scène vient d'entrer en page, la page d'accueil est affichée par défaut

{path: '*', composant: NotFound } peut être ajouté à la fin, indiquant que ce composant sera affiché lorsqu'aucune des routes ci-dessus ne correspond

itinéraires imbriqués

L'affichage imbriqué des composants via le routage est appelé routage imbriqué.

Par exemple, deux sous-composants doivent être affichés dans le composant à propos

Déclarer les liens de sous-route et les espaces réservés de sous-route

Dans le composant About.vue, déclarez les liens de route enfant pour tab1 et tab2 ainsi que les espaces réservés de route enfant. L'exemple de code est le suivant :

Déclarez les règles de sous-routage via l'attribut children
Dans le module de routage src/router/index.js, importez les composants requis et utilisez l'attribut children pour déclarer les règles de sous-routage :

Remarque : le chemin du sous-routage n'a pas besoin ajouter /

correspondance d'itinéraire dynamique

Réflexion : Il existe trois liens de routage comme suit :

Après le film se trouve le paramètre, et les données correspondantes seront rendues au composant Film en fonction du paramètre

Est-il possible de définir les trois règles de routage suivantes ?

 Inconvénient : La réutilisabilité des règles de routage est faible.

Le concept de routage dynamique

Le routage dynamique fait référence à la définition de la partie variable de l'adresse de hachage en tant qu'élément de paramètre, améliorant ainsi la réutilisabilité des règles de routage.

Utilisez les deux points anglais (:) dans vue-router pour définir les éléments de paramètre de la route. L'exemple de code est le suivant :

Dans ce cas, /movie/:id doit transmettre des paramètres, et /movie/:id? signifie qu'aucun paramètre ne peut être transmis

Objet paramètre $route.params

Dans le composant rendu par la route dynamique, vous pouvez utiliser l'objet this.$route.params pour accéder à la valeur du paramètre correspondant dynamiquement, et vous n'avez pas besoin de l'ajouter dans le modèle.

Utiliser des accessoires pour recevoir les paramètres d'itinéraire

Afin de simplifier le formulaire d'acquisition des paramètres de routage, vue-router permet d'activer le passage des paramètres props dans les règles de routage. L'exemple de code est le suivant :

Navigation déclarative et navigation programmatique

Navigation déclarative

Dans le navigateur, cliquer sur le lien pour réaliser la navigation est appelé navigation déclarative . Par exemple:

• Cliquer sur <a>des liens dans des pages Web ordinaires et cliquer dans des projets Vue <router-link>sont tous des navigations déclaratives

Dans le navigateur, la méthode d'appel des méthodes API pour réaliser la navigation est appelée navigation programmatique . Par exemple:

• La méthode d'appel de location.href pour accéder à une nouvelle page dans une page Web normale appartient à la navigation programmatique

navigation programmatique

router.push
accède à l'adresse de hachage spécifiée et ajoute un enregistrement d'historique

Appelez la méthode this.$router.push() pour accéder à l'adresse de hachage spécifiée et afficher la page du composant correspondante. L'exemple de code est le suivant :

router.replace
passe à l'adresse de hachage spécifiée et remplace l'enregistrement d'historique actuel.

Semblable à push, la différence :

• push ajoutera un enregistrement d'historique
• remplacer n'ajoute rien à l'historique, mais remplace l'historique actuel

router.go
implémente l'historique de navigation en avant et en arrière

Appelez la méthode this.$router.go() pour avancer et reculer dans l’historique de navigation. L'exemple de code est le suivant :

Simplification : dans le développement réel, une seule couche de pages sera généralement avancée et reculée. Par conséquent, vue-router fournit les deux méthodes pratiques suivantes :

$routeur.back()

Dans l'historique, retournez à la page précédente

$router.forward()

Dans l'historique, passez à la page suivante

garde de navigation

Les gardes de navigation peuvent contrôler l’accès aux itinéraires. Le diagramme schématique est le suivant :

Garde avant mondiale

Chaque fois qu'un saut de navigation de routage se produit, la pré-garde globale sera déclenchée. Ainsi, dans la pré-garde globale, les programmeurs peuvent contrôler les droits d'accès de chaque route :

Les 3 paramètres formels de la méthode de garde

La fonction de rappel de la pré-garde globale reçoit 3 paramètres formels au format :

3 façons d'appeler la fonction suivante

En vous référant au diagramme schématique, analysez les résultats finaux des trois méthodes d'appel de la fonction suivante :

L'utilisateur actuel a le droit d'accéder à la page d'accueil en arrière-plan, et peut être libéré directement : next()

L'utilisateur actuel n'a pas accès à la page d'accueil en arrière-plan, ce qui l'oblige à accéder à la page de connexion : next('/login')

L'utilisateur actuel n'a pas accès à la page d'accueil en arrière-plan et accéder à la page d'accueil en arrière-plan n'est pas autorisé : next(false)

Contrôler l'accès à la page d'accueil en arrière-plan

Lorsque de nombreux gardes-navigateurs sont nécessaires, l’approche suivante peut être utilisée :

// 全局前置守卫
router.beforeEach((to, from, next) => {
    
    
	// 要进行导航守卫的路径值
    const pathArr = ['/home','/home/users', '/home/rights']
    if (pathArr.indexOf(to.path) !== -1) {
    
    
        const token = localStorage.getItem('token')
        if (token) {
    
    
            next()
        } else {
    
    
            next('/login')
        }
    } else {
    
    
        next()
    }
})

Une autre façon d'écrire consiste à ajouter un élément de méta-configuration à chaque route et à juger s'il doit être jugé par les valeurs vraies et fausses de la méta.

     {
    
     
        path: 'users',
        component: Users,
        meta: {
    
     isAuth: true },
      },
      ...
      
// 全局前置守卫
router.beforeEach((to, from, next) => {
    
    
    if (to.meta.isAuth) {
    
     // 判断是否需要进行导航守卫
        const token = localStorage.getItem('token')
        if (token) {
    
    
            next()
        } else {
    
    
            next('/login')
        }
    } else {
    
    
        next()
    }
})

Deux modes de travail de routage

mode de hachage

• Par défaut, le mode de fonctionnement du hachage est activé.
• #Cela signifie hachage, suivi de la valeur de hachage
• Remarque : les valeurs après # ne sont pas envoyées au serveur

mode historique

Pour activer le mode historique, vous devez ajouter un élément de configuration du mode. La valeur par défaut est

l'historique de hachage sans #

La différence entre le hachage et l'historique

mode hsah

• Il y a toujours un signe # dans l'adresse, ce qui n'est pas beau
• Si l'adresse est partagée via une application mobile tierce à l'avenir, si l'application a une validation stricte, l'adresse sera marquée comme illégale.
• bonne compatibilité

mode historique

• L'adresse est propre et belle
• La compatibilité est légèrement pire que le mode hachage
• Lorsque l'application est déployée en ligne, elle a besoin du soutien du personnel back-end pour résoudre le problème de rafraîchissement du serveur de pages 404
  (par exemple, http://localhost:8080/home/message, à l'origine http://localhost:8080 , lorsque vous cliquez pour accéder à la page de message, le chemin Il a changé, le chemin est toujours http://localhost:8080/home/message lors de l'actualisation, et /home/message sera également envoyé au serveur, mais les gens je ne connais que http://localhost:8080, le hachage ne sera pas comme ça, http://localhost:8080/#/home/message, car rien après # ne sera envoyé au serveur)

source

Tutoriel ultra-détaillé sur le routage Vue-
router Article d'explication détaillée de Vue-router
pour une compréhension rapide du routage Vue-Router