Introduction à la Vue. js 3 Router

1. Introduction: Bonjour, bienvenue dans ce cours consacré au View Router et plus particulièrement au package compatible avec View version 3, qui est le View Router version 4. Le package View Route nous permettra essentiellement de passer d'une page à l'autre dans nos applications, mais il ne se limite pas à cela. Il s'agit d'un cours d'introduction qui inclut la plupart des sujets essentiels dont vous aurez besoin pour commencer. Nous commençons par le début en créant un nouveau projet VGS version 3 avec le package routes qui couvre les exigences dont nous avons besoin pour démarrer Ensuite, nous abordons le contenu, y compris l'itinéraire des fichiers, signification de tous ces fichiers et les endroits où configurer les itinéraires qui permettent de passer d'une page à l'autre. Ensuite, vous apprendrez comment configurer les liens pour passer d'une page à l'autre, et découvrirez également comment nous contrôlons totalement l'endroit où le contenu de la page est diffusé. Nous allons apprendre à créer des URL de page dynamiques afin inclure des variables telles que l'utilisateur actuel dans nos itinéraires L'utilisation des paramètres et des chaînes de requête est également importante lors du passage page à l'autre. Le package View Router nous permet également de transmettre des informations entre les routes et extraire les informations transmises dans les entrées de formulaire Le routage n'est pas toujours aussi simple qu'un ensemble de liens renvoyant à chaque page. Nous pouvons également avoir besoin d'une route imbriquée 2 et nous avons également abordé cette question Dans nos exemples, nous abordons style CSS à appliquer non seulement à nos liens, mais également en fonction de l' activation de l'itinéraire actuel. Nous abordons les pages de secours et expliquons comment activer le routage dans Javascript. Qui suis-je ? m'appelle Chris, je suis impliqué dans le développement Web depuis jeune âge et j'enseigne également en ligne et en personne depuis plus de dix ans. J'utilise GS et l'itinéraire dans mes propres projets. J'ai une expérience directe, bien que la connaissance de ViewGS ne soit pas strictement requise, un peu d'exposition à ce sujet vous aidera vraiment à comprendre ce cours car nous ne couvrons pas la partie vue en détail Si vous venez d'un framework frontal différent tel que React, vous devriez également pouvoir suivre. Enfin, je vous remercie pris le temps de visionner ce cours et j'espère que vous le trouverez utile pour apprendre le package View Router. 2. Aperçu du package Setup et routeur: Bienvenue dans la série où nous allons examiner le package View Route. En particulier, nous verrons comment ajouter le routeur et l'utiliser en utilisant View Version Free. Si vous n'avez jamais utilisé de routeur auparavant dans d'autres frameworks ou bibliothèques, il s'agit essentiellement d'un package que nous pouvons utiliser pour basculer entre les pages de vues. Pourquoi avons-nous besoin d'un package pour le faire en premier lieu ? Eh bien, en général, lorsque nous créons des applications ou des sites Web avec UGS, nous créons ce que l'on appelle une application à page unique Une application d'une seule page peut sembler assez trompeuse. Cela ne signifie pas que notre site Web ne comporte qu'une seule page. Cela signifie que dans les coulisses, lorsque nous visitons un site Web ou une application pour la première fois, un seul fichier Javascript est généralement téléchargé. Il s'agit d'un gros paquet de Javascript provenant du serveur. Ensuite, sur le front end, nous devons gérer la manière dont nous devons basculer entre les différentes pages ou composants de ce bundle en utilisant technologies Web plus traditionnelles telles que Php ou Ruby on Rails. Ce que nous faisons généralement lorsque nous cliquons sur différentes pages ou liens de navigation demande une nouvelle page au serveur. Mais avec les applications d'une seule page, nous avons déjà intégré tous les scripts Java de la première demande, nous devons basculer entre ces différentes parties lorsqu'il s'agit d'un package de routeur, tel que le View Router. Cependant, il ne s'agit pas seulement de passer d'une page à l'autre. Il y a généralement beaucoup plus de fonctionnalités que nous pouvons également découvrir, et nous en verrons beaucoup tout au long de cette série. Le package View Router est également officiellement pris en charge et maintenu par l'équipe principale de View GS. Il est profondément intégré, soutenu et maintenu à jour. Si vous voulez que les choses restent vraiment simples, il existe également un lien CDN que vous pouvez utiliser pour le View Router Mais pour cette démonstration, je vais utiliser un outil de construction. Je vais utiliser le package Vt. Vt va effectivement nous permettre de créer une nouvelle application Dress ou de créer une nouvelle application View Dress Et cela nous offrira de nombreuses fonctionnalités intéressantes, telles que le remplacement de modules à chaud, qui mettront automatiquement à jour le navigateur Chaque fois que nous apportons des modifications à notre projet sans plus en parler, nous nous attelons à la création d'un nouveau projet. Pour cela, je vais utiliser le code de Visual Studio. Entrez dans le terminal, qui est intégré ici. Nous pouvons le voir sur la documentation VGS. Pour créer une nouvelle application de visualisation, nous devons utiliser MPM in View Au plus tard, vous devez vous assurer que la version la plus récente ou la plus récente de node JS est installée. Vous pouvez le tester en tapant MPM v pour la version in, il en est actuellement à la version huit Ensuite, nous pouvons utiliser la commande CD pour accéder à n'importe quel répertoire vers lequel vous souhaitez vous déplacer. Dans mon cas, je vais passer au bureau pour installer ce projet. Ensuite, nous pouvons exécuter la commande d'initialisation. Il s'agit de la vue MPM au plus tard. L'avantage de créer un nouveau projet sans vue est que nous pouvons également installer le package View Router à ce stade. Si nous devons installer des packages supplémentaires, c'est très bien. Le nom du projet indique simplement view router. Un tapuscrit ? Non, nous n'avons pas besoin de JSX. Nous pouvons ajouter le View Router car c'est le but de la série. Nous n'avons pas besoin de gestion d'état ni de tests. OK, ouvrons-le dans le code de Visual Studio, et faisons-le glisser. Il se peut également que vous deviez rouvrir le terminal. Et à partir de là, juste avant de poursuivre, nous devons exécuter MPM install pour installer tous les packages dont nous avons besoin D'accord ? La dernière étape dont nous avons besoin est MPM run dev pour exécuter notre serveur de développement Nous pouvons donc voir notre projet dans le navigateur. Copiez ce lien ou cette commande et cliquez en maintenant la touche Ctrl enfoncée pour l'ouvrir. Nous avons maintenant créé avec succès un nouveau projet sans affichage. L'une des choses que vous remarquerez instantanément si vous avez installé l'itinéraire de visualisation à ce stade, c'est nous avons deux liens entre lesquels vous pouvez passer de l'un à l'autre. Nous avons le lien d'accueil et aussi la page à propos. Nous avons certaines fonctionnalités de routage prêtes à l'emploi, mais nous devons également ajouter nos propres itinéraires et nos propres fonctionnalités. Jetons un coup d'œil dans les coulisses et voyons comment cela se passe. Si nous allons dans le dossier source, dans le dossier du routeur, nous avons cet index. Vous verrez qu'en haut de ce fichier, le package View Router est déjà installé depuis que nous l'avons ajouté lors de la configuration du projet. Il s'agit d'importer deux éléments de ce package. Le premier est Create router, que vous pouvez voir ici. Cela crée un nouvel objet routeur avec toutes nos routes et configurations. Vous pouvez le voir à l'intérieur, nous pouvons choisir entre l'historique ou nous pouvons également configurer le mode de hachage. Nous y reviendrons plus tard, mais vous passerez probablement le plus clair de votre temps avec le routeur à l'intérieur de ce réseau de routes. Si nous jetons un coup d'œil ici, chacun de nos itinéraires est configuré comme un objet. Pour le plus simple, nous avons défini un chemin de fichier. Et ce n'est que le répertoire personnel. C'est celui que nous voyons lorsque nous accédons simplement à l'URL de notre projet. Il s'agit d'un nom ou d'un alias que nous donnons à chacune de ces routes et que nous pourrons référencer ultérieurement lorsque nous configurerons notre composant de liens, que nous voulons afficher. Lorsque nous sommes sur cette page, nous avons importé ce que l' on appelle la vue d'accueil. Nous pouvons voir en haut que cette vue d'accueil est extraite du dossier des vues. Jetez un œil à la barre latérale, ouvrez les vues et nous avons notre page d' accueil et notre vue à propos Si nous ouvrons l'une de ces deux routes de vues à l'intérieur d'ici, nous vous semblerons assez familiers si vous avez déjà travaillé avec VGS dans le passé et si elles sont configurées exactement de la même manière qu'un composant GS de vue normal Nous avons le modèle qui ajoute notre code HTML à la page. Nous pouvons avoir une section de style facultative, et nous pouvons également avoir une section de script deux. Ils ont exactement le même aspect que nos composants, que nous pouvons voir ici. La seule différence en termes de structure est que nous les organisons dans un dossier de vues. Nous savons ceux entre lesquels nous devons basculer avec le routeur. Juste pour clarifier, un composant peut être n'importe quelle pièce ou n' importe quelle section de notre page, mais nous nous assurons que notre dossier de vues contient les routes entre lesquelles vous souhaitez basculer avec le routeur. De retour à la page d'index des itinéraires, nous pouvons faire défiler la page vers le bas et voir notre deuxième objet routeur. Cela a la barre oblique sur la voie à suivre. Nous pouvons également le saisir, c'est entrer, puis nous accédons à la page à propos. Cela a également un nom de routeur, mais la différence entre nos deux routes ici est la première fait directement référence aux composants et la seconde fait ce qu' on appelle une importation. Comme nous pouvons le voir ici, nous avons quelques commentaires ci-dessus. Cela nous indique qu'au lieu importer directement nos composants, y compris ceux-ci avec le reste du package, nous séparons notre point de vue sur les informations Nous pouvons donc utiliser ce que l' on appelle le lazy loading. C'est l'une des autres fonctionnalités du package View Router. Il est également capable de ce chargement différé. Comme mentionné précédemment, lorsque nous visitons pour la première fois une application d'une seule page et que nous saisissons l'URL, cela téléchargera le bundle Javascript complet depuis le serveur. Cependant, même si parfois nous ne voulons pas ce gros bundle, il peut s'agir d'une très grosse application. Ce que nous pouvons faire plutôt que d'avoir un seul fichier de script JAR, c'est les diviser en fichiers séparés. C'est ce qui s'est passé ici. Nous avons séparé la vue « À propos » dans un fichier distinct. Il n'est téléchargé depuis le serveur que lorsque nous cliquons sur le lien À propos. Si vous le souhaitez, nous pourrions également devenir un composant normal, comme ci-dessus, disons À propos de la vue. Nous devrions également l'importer comme ci-dessus. Nous allons importer la vue À propos. Cela se trouve à côté de la vue sur la maison. Il suffit de changer le nom. Dis ça. Vt actualisera automatiquement la page. Nous pouvons toujours alterner entre ces deux itinéraires. Enfin, nous devons inclure ce routeur dans notre package de vue. Nous l'exportons donc en bas puis dans le fichier principal. Ce fichier de routeur exporté est ensuite importé dans notre fichier Javascript principal. Le reste, ce sont des vues régulières. Nous créons une nouvelle application View GS, qui est stockée dans l'application. Ensuite, nous pouvons ajouter ce package de routeur à notre application avant qu'il ne soit ensuite monté sur le dom. 3. RouterLink et RouterView: Auparavant, nous avions configuré un projet sans affichage. Nous avons installé le package View Router. Nous avons brièvement examiné les options du routeur. La page d'index du routeur passe à l'intérieur de nos objets de route qui correspondent à un composant particulier. Par exemple, fold about affichera cette vue appelée Vue à propos. Nous pouvons le constater si nous regardons nos deux liens ici à droite, nous basculons entre nos deux points de vue. Mais actuellement, il se peut qu'il y ait encore un peu de mystère quant à la façon dont ces deux liens changent exactement ces URL. Cela est dû au fait que ces deux liens sont ajoutés par défaut lorsque nous configurons notre projet Jetons un coup d'œil dans les coulisses et voyons comment nous pouvons les configurer nous-mêmes et en ajouter d'autres pour ce projet. Nos liens ont été automatiquement configurés dans la vue de l'application, mais ils peuvent également figurer dans n'importe quel autre composant. Deuxièmement, nous pouvons le voir en haut, nous devons importer quelque chose à partir du package View Router. Et c'est quelque chose dont nous avons besoin, c'est d'un composant de liaison routeur. C'est tout le code que nous avons vu. Sur le côté gauche, nous avons le logo de la vue, que vous pouvez voir ici. Nous avons les composants Hello World avec le message. Ensuite, nous avons nos deux liens de navigation. En bas, nous utiliserons les composants de liaison du routeur nous avons importés à partir du package View Router. Vous pouvez voir que cet attribut appelé 22 est l'emplacement vers lequel nous voulons créer un lien lorsque vous cliquez dessus Nous avons le texte d'accueil et liens vers ces deux URL Vous vous demandez peut-être aussi pourquoi ne pas simplement utiliser l'élément HTML normal a pour établir un lien entre les pages qu'il contient Ici, nous pouvons utiliser une barre oblique ou nous pouvons également dire qu' il est préférable d'utiliser le lien du routeur plutôt que les éléments A traditionnels lorsque vous utilisez View GS pour plusieurs raisons L'une des grandes différences est que lorsque nous utilisons le mode historique comme c'est le cas actuellement, le package View Router doit intercepter le clic provenant de un de ces liens et empêcher le navigateur d' actualiser la page, ce qu'il fait automatiquement Lorsque vous utilisez View GS ou une application d'une seule page. Nous n'avons pas besoin d'actualiser cette page car nous avons automatiquement tout le code jarvscript disponible dans le bundle, que nous pouvons passer d'un code à l' Supprimons cela. De plus, en guise de remarque rapide, si vous utilisez le package View Router basé sur View Two, vous avez peut-être utilisé le tag prop qui ressemble à ceci Nous avions l'habitude de l'utiliser pour définir exactement le type d' élément HTML sous lequel nous voulions que cela soit rendu, mais cela n'est plus disponible dans ce package De plus, lorsque nous utilisons route to link, nous ne sommes pas limités à transmettre une chaîne statique à nos deux accessoires, comme ici Nous pouvons également transmettre toutes les données dynamiques que vous souhaitez. Par exemple, il se peut que nous ayons un utilisateur et que nous souhaitions créer un lien vers un nom d'utilisateur en particulier. Passons à notre script. Nous allons configurer une constante appelée user, qui sera un objet. Mais avant cela, nous allons l'inclure dans la référence. Nous devons importer la référence depuis le package de visualisation si vous ne l'avez jamais vu auparavant. Il s'agit d'une fonctionnalité gratuite, ce qui signifie que tout le contenu contient restera réactif. Par conséquent, tout composant qui repose sur ces données sera mis à jour chaque fois qu'il y aura un changement à partir de là, nous pouvons transmettre nos données sous forme d'objet et nous dirons quelque chose comme nommer l'ID utilisateur. Puisque nous utilisons la configuration du script, notre utilisateur sera automatiquement renvoyé de notre script et pourra être utilisé. Aucun modèle. Nous pouvons l'ouvrir entre accolades, il y a des données dont nous avons besoin, mais nous pouvons également les utiliser à l'intérieur des deux accessoires Dupliquons cela, nous allons regarder un exemple. Nous avons toujours besoin de guillemets pour entourer tout cela, mais nous pouvons utiliser les tactiques Javascript pour introduire des variables Javascript Nous voudrions peut-être passer à quelque chose comme forward slash user. Ensuite, en utilisant le symbole du dollar et les accolades, nous pouvons extraire nos données dynamiques telles que notre nom d'utilisateur Disons simplement utilisateur. Mais si nous devions accéder au navigateur et essayer cela, cela poserait un problème. Essayons ça. Cliquez sur l'utilisateur. À l'intérieur de cette clé de lien, nous voyons l'ID utilisateur plutôt que la valeur dynamique. Comme pour tout le reste dans View free, lorsque nous utilisons des données dynamiques, nous devons également utiliser la syntaxe V bind, qui est composée de deux points. Cela indique à View GS de ne pas le rendre sous forme de chaîne, mais de prendre en compte les valeurs des éléments disponibles que nous transmettons maintenant si nous cliquons sur l'utilisateur Cela inclura désormais les données dynamiques dont nous avons besoin. Cela commence à nous donner une idée de la flexibilité dont nous disposons avec le View Router. Nous pouvons également aller encore plus loin en transmettant un objet. Encore une fois, étant donné que nous utilisons des données dynamiques ou du script Java, nous devons inclure les deux points pour les supprimer. Nous pouvons ensuite passer notre chaîne en passant l' objet Javascript. C'est très simple. Cet objet Javascript peut simplement contenir le chemin que nous venons de regarder, barre oblique même pour le lien about, qui passait un objet pour le chemin, mais celui-ci était dirigé vers l'avant. Cela devrait toujours fonctionner exactement comme avant. Nous verrons comment fonctionnent les deux liens en haut de la page. Nous l'aurions orthographié correctement. Cela fonctionne bien, mais ce n' est qu'un exemple simple, et nous n'avons aucune fonctionnalité supplémentaire par rapport à ce que nous avions auparavant. Mais nous pouvons plutôt transmettre à cet objet une référence aux noms que nous avons déjà donnés à ces routes dans le fichier du routeur. Si vous vous souvenez de la vidéo précédente sur la page d'index des routeurs, chacun de ces itinéraires avait une propriété de nom unique sur laquelle nous nous trouvions Nous pouvons faire référence à l'intérieur de notre objet, celui-ci passant le nom de maison. En fait, c'était les minuscules qui devaient correspondre. Et aussi pour environ, essayons celui-ci. Vous vous demandez peut-être pourquoi nous avons déployé tous ces efforts alors que cela fonctionne exactement de la même manière qu'à l'origine. Eh bien, l'une des raisons et l'un des avantages de l'utilisation du nom est la convivialité. Si vous y réfléchissez, si nous avions ce lien routeur à propos de nous à plusieurs endroits notre projet et qu'un jour , nous serions peut-être choisis plutôt que d'avoir le lien à suivre, nous voudrions peut-être le remplacer par quelque chose comme une barre oblique à propos Eh bien, plutôt que d'examiner chacun de nos points de vue ou composants et de modifier ce lien, il suffit d'accéder au fichier de notre routeur et de changer le chemin en « about us ». Ce nom serait toujours d'actualité et fonctionnerait toujours dans tous nos composants. Ce ne sont que des changements en arrière. OK, la prochaine chose à découvrir est un truc appelé Route of View. Nous avons découvert comment passer page à l'autre en utilisant le lien du routeur, que nous avons ici. Mais nous avons également importé quelque chose appelé Route of view. Cet itinéraire est responsable de l'affichage de notre page à l'écran. Dans l'application, nous avons cette section d'en-tête qui, en raison du style par défaut, a placée sur la gauche. Ensuite, sur la droite, le contenu de nos deux vues est affiché. Cela se produit parce que nous avons placé l'itinéraire de vue au bas de ce fichier. C'est l'exutoire de notre contenu. Par exemple, si vous souhaitez le supprimer et le placer à un autre endroit, il se déplace désormais vers la gauche. Cela nous donne une flexibilité totale quant à l' endroit où nous affichons le contenu de nos pages. 4. Paramètres et requêtes: Le package view routes a également bien plus à offrir que le simple passage d'un composant à l'autre. Il peut également être utilisé pour transmettre des données sous forme de paramètres et chaînes de requête lorsque vous travaillez avec des URL, tout comme nous sommes ici, nous travaillons actuellement avec le lien d'accueil et le lien suivant Nous souhaiterons peut-être également ajouter des informations supplémentaires , telles que Pam, tout comme un utilisateur Et souvent, nous pouvons avoir besoin d'informations supplémentaires, telles que des requêtes, une URL précédente, celles-ci comportent un point d' interrogation comme celui-ci. Ensuite, nous verrons des informations supplémentaires telles que celles-ci. Nous voulons maintenant voir comment nous pouvons travailler avec les deux paramètres, requêtes à l'intérieur du View Router Passons à la vue de notre application où se trouvent nos deux liens de routeur. Nous allons d'abord examiner les paramètres ou les paramètres qui sont comme des variables pour une route donnée dans le lien du routeur Nous pouvons les ajouter à l'intérieur de nos deux accessoires. Rappelez-vous que plus tôt, nous avons envisagé d'ajouter des variables, comme nous l'avons fait ici. Et voici l'exemple commenté. Ce que nous voulons faire, c'est supprimer le nom route. En fait, nous allons simplement le commenter , puis le dupliquer. Nous allons donc le garder totalement intact. Nous pouvons configurer le chemin comme nous l'avions fait plus tôt. Cela va être lié à un identifiant utilisateur particulier, que nous avons stocké dans cet objet. Le chemin, puisque nous utilisons des variables, nous pouvons les définir avec les tactiques. Nous allons dire « utilisateur transféré », puis nous souhaiterons peut-être que le nom d'utilisateur tel que celui que nous avons ici, en utilisant script de travail, soit inséré lorsque l'identifiant utilisateur est modifié sur le lien utilisateur. Ensuite, nous pouvons voir que ce lien utilisateur est maintenant mis à jour. Et si nous cliquons dessus, nous verrons notre utilisateur. Et puis la variable qui se trouve juste après, c'est notre identifiant 1234, mais nous n'avons actuellement pas de composant correspondant à afficher. Ce que nous allons faire, c'est modifier la vue à propos, nous dirons la vue utilisateur. Nous sommes en train de changer cela. Nous devons également passer à notre routeur. Et puis l'index JS, nous allons changer la vue about, la vue utilisateur. Ceci est également mis à jour ici. Le deuxième composant, le nom de l'utilisateur. Maintenant, nous devons également modifier cela pour devenir un utilisateur de barre oblique. Maintenant, si nous cliquons dessus , nous verrons toujours, même si nous sommes propriétaires de Forward Slash User, que nous avons un problème dans la console Nous n'avons aucune correspondance pour Forward Slash User, puis transférer notre nom d'utilisateur. C'est parce que nous ne prenons pas en compte l' URL complète. Avec ce chemin, nous allons avoir une variable que nous pourrions conserver codée en dur si nous voulions ajouter 1234. Ensuite, nous voyons que nous sommes redirigés vers la page à propos et qu'elle passe à la page utilisateur, c'est cohérent, nous pouvons toujours voir que nous sommes redirigés vers la bonne page. Mais le problème que nous pouvons avoir, c'est si nous avons un identifiant utilisateur différent, si quelqu'un d'autre se connecte, cette route ne sera pas trouvée. Au lieu de cela, nous devons être en mesure de capturer toute URL différente ajoutée et de traiter efficacement cette section comme une variable. La façon de le faire dans la page d' index du routeur est qu'au lieu d'avoir une valeur codée en dur comme celle-ci, nous pouvons utiliser les deux-points pour capturer la valeur à l'intérieur d'une variable appelée ID Le package View Router comprend maintenant que cette section, ou ce segment de l'URL, est une variable susceptible changer et qu'il affichera toujours notre vue utilisateur. Maintenant, nous pouvons taper tout ce que nous voulons, et cela est toujours affiché. La prochaine chose à laquelle il faut penser est de savoir comment intégrer ces informations utilisateur dans notre page ou nos composants. Eh bien, si nous y réfléchissons, s'il s'agit d'un utilisateur et que nous voulons récupérer l'identifiant utilisateur unique, nous souhaiterons peut-être l'afficher ou quelque chose comme le nom d'utilisateur dans les composants. La façon de le faire est d'utiliser ce nom de variable que nous avons donné dans le chemin. N'oubliez pas que nous avons appelé cet identifiant. Si nous accédons à la vue utilisateur, nous pouvons accéder aux informations de route actuelles à l'intérieur des doubles étalonnages en utilisant le symbole $1 Dites cette actualisation. Nous pouvons voir que toutes les informations de l' itinéraire actuel sont affichées. Nous avons le chemin complet qui correspond exactement à ce que nous voyons dans la barre d'URL. Nous avons le nom que nous avons défini dans le fichier du routeur. Nous avons également les paramètres où nous pouvons voir l'identifiant correspond actuellement à ce que nous avons ici C'est exactement ainsi que nous pouvons accéder à ces informations d'identification à l'intérieur de notre composant. Nous affichons actuellement l'itinéraire. Comme il s'agit d'un objet, nous pouvons utiliser DoPAMD pour capturer cette valeur saisie Essayons cette route. Péramède. Désormais, toute valeur que nous ajoutons dans son segment ID sera affichée à l'intérieur du modèle. Également, juste en guise de note 2. En plus d'utiliser la route du symbole du dollar, nous pouvons également accéder au routeur du symbole du dollar. Cela nous donne un peu plus d'informations sur toutes les fonctionnalités du routeur. Nous pouvons voir des choses telles que les options dans lesquelles le mode historique est défini. Nous pouvons voir l'itinéraire actuel. Nous pouvons voir tous nos itinéraires qui sont configurés sous forme de tableau. Ici, nous avons la maison et aussi le deuxième itinéraire qui est notre utilisateur. Il s'agit des mêmes informations d' itinéraire que nous avons configurées sur la page de notre routeur. Encore une fois, le routeur dollar symbol vous donnera plus d'informations sur le package complet du routeur. itinéraire symbolisé par le dollar n' affichera que des informations sur l' itinéraire actuel que nous visitons. Ce n'est pas toujours la voie à suivre si nous voulons accéder à des variables ou à des informations dans notre modèle. Nous souhaiterons peut-être également les inclure dans notre script Jar. Pour ce qui est de la façon dont nous pouvons le faire si nous utilisons l'API de composition , ce que nous utilisons actuellement, disons que nous avons un script et que nous utiliserons la configuration du script. Nous pouvons également les importer depuis le package use route du routeur. Nous pouvons voir ici, d'après les informations, c'est l'équivalent de la route symbolisée par le dollar que nous venons d'utiliser. Voici toutes les informations sur notre itinéraire actuel, y compris les paramètres si vous le souhaitez Vous pouvez également importer et utiliser un routeur. C'est l'équivalent d'un routeur symbolisé par le dollar. Nous voulons les importer depuis le package View Router. Ensuite, nous y accédons comme nous le ferions avec n'importe quel autre composable en vue Nous utilisons route, nous les appelons en tant que fonction et nous stockons la valeur de retour dans une variable. Disons que cont route est égal à ceci. Ensuite, si nous le dupliquons, nous pouvons également accéder à l'emplacement du routeur. Dans un journal de console, nous nous précipitons et nous pouvons voir que les informations sont placées dans notre objet de balise. Nous avons le nom, les paramètres, les requêtes que nous allons bientôt examiner, le chemin complet sur lequel nous nous trouvons actuellement Nous sommes maintenant libres d' utiliser n'importe quelle partie de ces informations dans notre code. Il convient également de noter que vous pouvez également avoir plusieurs segments dynamiques dans l'URL. Vous pouvez également dire forward et insérer une nouvelle variable inside ici. Ensuite, il vous suffit de vous rendre sur la page d'index du routeur et configurer une nouvelle variable pour capturer ces informations Il sera désormais disponible sous ce nom. plus, le View Router peut également gérer les chaînes de requête. Deuxièmement, si vous n'avez jamais utilisé de chaîne de requête auparavant, ils peuvent transmettre des informations supplémentaires dans une URL, comme nous l'avons vu plus tôt. Vous avez peut-être vu une URL qui ressemble à ceci. Revenons à notre première URL ou à notre URL d'accueil. Vous pouvez voir quelque chose qui ressemble à ceci avec un point d'interrogation. Et puis nous pouvons dire que l'utilisateur est égal à n'importe quelle chaîne particulière. Ensuite, nous pouvons ajouter plusieurs informations séparées par l'esperluette, par exemple, par plan égal à un mois, le nom Nous pouvons continuer encore et encore et en ajouter autant que nous le voulons afin de pouvoir accéder à notre utilisateur. Nous pouvons accéder à notre plan et à notre nom car ils sont séparés après ce point d'interrogation. Voyons comment nous pouvons les utiliser. Ces pré-chaînes sont accessibles localement ou peuvent également être envoyées au serveur. Un cas d'utilisation typique pour cela serait le formulaire HTML. Passons au visionnage. Nous allons placer dans un formulaire une action de suppression. Puisque nous voulons que view GS gère cela, nous allons rapidement configurer un formulaire avec un type de saisie de texte. Le nom sera égal à celui de l'utilisateur. Cette section de nom, lorsque vous travaillez avec des requêtes, va être très importante. Nous verrons cela dans la chaîne de requête. Créons-en un de plus. Nous dirons l' emplacement, une entrée, le nom du lieu. Enfin, un bouton pour soumettre. Ce formulaire de soumission de texte à l'intérieur d'ici est parfait pour le voir. Accédez au navigateur, assurez-vous que l'utilisateur est sorti, saisissez le nom, l' emplacement et appuyez sur Envoyer. Vous pouvez voir instantanément dès que vous le faites, séparés par un point d'interrogation, que nous avons nos deux informations. Nous avons l'utilisateur égal à Chris et également l' emplacement égal au Royaume-Uni. Et les deux sont capturés puisque nous avons ajouté l'attribut name à chacune de nos entrées L'utilisateur et l'emplacement seront envoyés au serveur avec le formulaire lorsque nous le soumettrons. Si vous ne savez rien formulaires ou de l'envoi de formulaires au serveur, ne vous inquiétez pas pour ces informations. Tout ce que nous devons savoir ici, c'est avec cet exemple et lorsque nous utilisons des formulaires, ces requêtes ou ces chaînes de requête sont automatiquement ajoutées à notre URL. Mais lorsque nous travaillons avec le package View Router, nous pouvons également en ajouter deux manuellement et y accéder dans toutes les pages ou composants. Passons à notre application View, qui contient nos liens de routeur. Pour celui-ci, nous allons le placer dans le lien d'accueil, à l'intérieur de l'objet séparé par une virgule, nous pouvons configurer notre requête qui est égale à un objet Ensuite, à l'intérieur d'ici, comme pour tout autre objet, nous ajouterons notre clé d'objet et nos valeurs d'objet. Pour cet exemple, placons-le dans un jeton, qui peut être n'importe quelle chaîne de texte. Vous pouvez également insérer des variables à l'intérieur d' ici si vous souhaitez enregistrer. Désormais, l'accès est un jeton intégré à nos composants. Puisque, sur le lien d' accueil, nous passons la vue d'accueil à partir d'ici, à l'intérieur des doubles calibrages, nous pouvons encore une fois accéder à l'itinéraire en symbole du dollar pour l'itinéraire actuel vers le lien d'accueil Ce sont toutes nos informations. Et vous pouvez voir à l'intérieur que nous avons cette requête qui est égale à notre jeton. Nous pouvons affiner cette requête de route descendante, qui nous donne notre jeton, et nous pouvons également simplement accéder à la valeur avec le jeton. Si vous jetez également un œil à l'URL, vous pouvez voir comment le jeton a maintenant été appliqué. Il s'agit d'un moyen pratique de transmettre de petites informations entre nos itinéraires. Quelque chose comme l'accès, les jetons, les identifiants d'utilisation ou toute autre petite information. 5. Routes imbriquées: Comme mentionné précédemment dans ces leçons, le View Router est vraiment flexible. Cependant, nous n'utilisons pas actuellement toute la flexibilité qu'il offre. Tout ce que nous avons, c'est qu'à l'intérieur de cette vue d'application, nous avons nos deux liens de routeur pour passer d'un chemin à l'autre. Nous les plaçons dans un seul et même point de vue. Ce n'est pas très flexible. Cela signifie simplement que nous avons nos deux liens et que tout le contenu de tout lien supplémentaire sera toujours au même endroit. Mais changeons un peu les choses et voyons comment nous pouvons faire face à différentes situations. Rétablissons également à l'utilisateur un chemin simple. Nous allons le dupliquer et créer la zone du compte utilisateur dans le chemin. Cela restera dynamique, nous pouvons donc dire « transférer le compte », puis le placer dans notre nom d'utilisateur. Mettez-le en haut, c'est donc un nom d'utilisateur. Nous devons également le configurer dans l'index de nos routeurs. Pour cette copie, n'importe lequel de ces itinéraires indiquera le nom du compte et créera également un nouveau composant appelé affichage du compte. N'oubliez pas que nous avons modifié la section utilisateur afin de pouvoir supprimer les segments dynamiques, mais nous devons l'ajouter à notre espace de compte. Il s'agit de transférer des comptes, nous allons sélectionner le nom d'utilisateur créer une nouvelle vue dans notre dossier de vues. Dupliquez n'importe lequel d'entre eux. Il s'agit de la vue du compte. Tout est clair, il y a du texte à l'intérieur. Nous devons également l'importer dans la route pour le fichier, le copier-coller Et celle-ci est la vue du compte. Tout devrait bien fonctionner. Nous avons maintenant la maison, l' utilisateur et aussi le compte. Cela indique également comment nous utilisons l'ID et affichons le nouveau composant que nous venons de créer. en revenir à l' objectif de cette vidéo, nous allons examiner les itinéraires imbriqués L'idée qui sous-tend les itinéraires imbriqués est d'utiliser ces liens. Actuellement, nous remplaçons toute cette section sur la gauche en raison de notre itinéraire de vision. Mais qu'en est-il si nous ne voulions pas, par exemple, remplacer la page complète du compte ? Au lieu de cela, nous souhaiterons peut-être placer certaines vues en dessous, telles que certaines commandes précédentes ou même le profil de l'utilisateur. Pour voir cela à titre d'exemple, revenons à nos vues et nous allons créer deux nouvelles vues. Copiez-collez ceci. L'un d'eux est d'utiliser les ordres. Changez simplement le texte pour qu'il soit « commandes ». Ensuite, copiez-collez celui-ci. Et cela peut être mettre à jour le profil, modifier le texte, s'assurer que les deux sont enregistrés dans la vue de l'application. Et nous pouvons relier les deux en bas à l' aide d'un routeur. Le premier sera la mise à jour du profil et le second pour notre nouvelle vue, qui concerne les commandes précédentes. Comme indiqué précédemment, nous ne voulons pas que ces deux liens remplacent simplement tout le contenu supplémentaire ci-dessus et s'affichent dans nos itinéraires de visualisation Au lieu de cela, étant donné que ces deux nouveaux itinéraires sont liés à nos comptes, il peut être judicieux de les avoir tous les deux, car les itinéraires enfants de ce compte, ressemblent à ceci. Nous pouvons copier ces deux sections complètes, les coller dedans. Mais au lieu de passer à la barre oblique du compte, puis à l'identifiant utilisateur, nous avons ensuite créé un lien pour mettre à jour nos commandes précédentes Cela aura l'air similaire, mais il s'agirait d'ordres barres obliques à terme Enregistrez ceci, puis accédez à notre index des routeurs où vous pouvez importer nos deux nouvelles vues Dupliquez-le deux fois. Celui-ci consiste à mettre à jour le profil, couvrir et à l'ajouter au chemin. Et le second concerne les commandes d'utilisation. Cela nous place maintenant dans une position où nous avons deux nouvelles routes à gérer. Nous avons un chemin, qui sera comptes à barres obliques, puis les barres obliques Nous voulons récupérer le nom d'utilisateur, nous voulons donc utiliser les deux points pour cela. Nous pouvons bloquer cela dans une variable, puis transférer la mise à jour de la barre oblique Le second que vous souhaitez gérer est le même, à savoir les ordres barres obliques L'une des options consiste à créer deux nouveaux objets de route ici pour ces deux URL. Ce n'est toutefois pas l'idéal car, comme nous l'avons déjà mentionné , chacune de ces nouvelles vues remplacera la page du compte. Mais nous voulons les placer à l'intérieur. Pour régler ce problème dans l'objet de route de notre compte, nous pouvons ajouter un tableau children. Ce tableau d'enfants déclarera quels composants doivent être imbriqués dans cette page de compte de niveau supérieur Voici à quoi cela ressemble juste une fois que nos composants seront placés dans le tableau des enfants. Chacun de ces enfants est un objet qui va suivre le chemin et aussi le composant. Tout ce que nous avons à faire est d'ajouter une mise à jour ultérieure. Mais au lieu de l'ajouter au niveau supérieur, nous l'ajoutons dans le chemin de l'enfant. Lorsque nous arriverons sur cette URL, nous allons afficher le composant qui est le profil de mise à jour séparé par une virgule Nous pouvons également effectuer des commandes à terme , ce qui rendra nos commandes que nous utilisons. Nous avons géré deux itinéraires et nous pouvons maintenant les supprimer. Cela devrait déjà être le cas. Maintenant, pour tester cela, nous avons deux nouveaux liens en bas de page. Cliquez sur Mettre à jour le profil, nous pouvons le voir tout de suite. Nous allons accéder à Fold le compte, puis plier le nom d'utilisateur, qui se trouve dans cette section juste ici. Puis pliez également la mise à jour. Testons les commandes précédentes. Cliquez dessus, encore une fois, le même compte, le même nom d'utilisateur, puis les commandes pliées sont ajoutés à la fin. OK, vous vous dites peut-être « super ». Dans la vue du compte, nous pouvons voir ce texte sur la gauche, mais nous ne voyons aucune référence à nos deux composants enfants. Eh bien, pour cela, nous devons indiquer à VGS exactement où nous voulons que ces composants s'affichent Si nous passons à la vue du compte, le routeur de visualisation ne sait pas où nous voulons l'afficher à l'intérieur du modèle. Nous devons le dire en ajoutant une vue supplémentaire du routeur. OK, passons à nos comptes sans aucun contenu supplémentaire. Ci-dessous, cliquez sur Mettre à jour le profil. Nous voyons ce texte de Update profile, qui se trouve juste ici. Enfin, cliquez sur Commandes précédentes. Voici le texte de nos commandes , que nous avons configuré ici. Les deux sont désormais affichés à l'intérieur de l' itinéraire depuis notre compte. Le formatage semble un peu étrange en ce moment à cause du CSS. En fait, nous pouvons probablement voir cela un peu mieux si nous examinons les actifs sources. Nous pouvons supprimer tous les styles à partir d'ici. Cela devrait maintenant paraître un peu plus clair. Nous avons la page du compte en haut, puis nous n'utilisons aucun itinéraire de visualisation juste en dessous. Nous pouvons alors voir nos itinéraires enfants imbriqués. 6. Cours de routeur: Ensuite, nous allons examiner les classes actives et la façon dont routeur View JS les applique automatiquement à nos liens. Si vous regardez attentivement, nous sommes actuellement sur le lien d'accueil et celui-ci a une couleur légèrement plus foncée. Cliquez sur l'utilisateur. Cette couleur plus foncée doit maintenant être appliquée à l'utilisateur. Cela se produit pour chacun de nos liens. Cela est utile si nous voulons ajuster le style de l'un de nos liens et indiquer à l'utilisateur le chemin qu'il emprunte actuellement. Pour ce faire, il suffit d'accéder outils de développement, de cliquer avec le bouton droit de la souris et d'inspecter, en gardant l'onglet Éléments et en utilisant l'inspecteur pour cliquer sur l'un de nos liens. Nous sommes actuellement sur le chemin du retour. Si nous examinons la classe, nous pouvons voir que le lien du routeur est actif. Et aussi une deuxième classe de routeurs Exact Active. Cela ne figure actuellement sur aucun des liens suivants, mais si nous cliquons sur l'utilisateur, ces classes sont désormais déplacées vers le lien utilisateur. Il en va de même pour le compte, voici le lien de notre compte. Et ils ne s'appliquent plus aux deux premiers. Mais quelque chose de différent se produit si nous cliquons sur Mettre à jour le profil. Comme pour les liens précédents, profil de mise à jour active les deux classes supplémentaires de liens de routeur et active également les liens de routeur exactement actifs. Cependant, la différence est que cette section de compte possède également cette seule classe de lien de routeur active. Il en va de même si nous cliquons sur les commandes précédentes. Le lien de commande précédent permet d'accéder à nos deux cours supplémentaires. Et cette classe unique est également ajoutée à la page du compte. Tout d'abord, ces classes sont ajoutées automatiquement par le View Router. Et cela peut nous permettre de mettre à jour le style de la page en cours. Quelle est la différence entre routeur link active et router link exact active ? Eh bien, la différence réside dans cette page de compte. Si vous avez visionné les vidéos précédentes, vous savez que la page du compte contient à la fois le profil mis à jour et les commandes précédentes imbriqués sous forme d'itinéraires secondaires Le compte nous lie au compte Forward Slash, puis au nom d'utilisateur. Si nous cliquons sur mettre à jour le profil, la même URL est en place, mais avec une mise à jour à la fin des commandes précédentes, est également ajoutée à la fin. Ce qui se passe ici concerne les commandes précédentes et le profil de mise à jour. Cela commence par les comptes à barres obliques. Par conséquent, le lien vers le compte se trouve ici est considéré comme une correspondance partielle Si l'un de nos liens correspond partiellement, nous activerons la classe du lien routeur. Puisque cela est techniquement actif actuellement. Mais comme son nom l'indique pour les autres liens, la classe de routeur link exact active n'est appliquée que s'il existe une correspondance exacte avec ORL. C'est le cas actuel pour le profil de mise à jour. Si nous cliquons sur Commandes, ce lien correspond exactement à notre URL. Cela permet également d'obtenir la classe exacte et la même chose pour tous les autres liens, nous cliquons sur l'utilisateur. Non seulement il s'agit d'une correspondance partielle, mais également d'une correspondance exacte. Nous constatons que les deux classes sont appliquées. La raison pour laquelle ils sont stylisés est que par défaut, lorsque nous configurons le View Router dans la vue de l'application, il applique un certain style à la section inférieure Si nous faisons défiler la page vers le bas, nous avons nos liens de navigation , les éléments A et également une couleur différente pour la classe de routeur link exact, active. C'est ainsi que nous pouvons ajouter du style à nos liens actifs à la fois pour une correspondance complète et partielle. 7. Pages de fallback: Il est également important de gérer ce qui se passe si l'utilisateur arrive sur la mauvaise partie de notre application ou sur une page qui n'existe pas. Par exemple, si nous ajoutons simplement quelque chose à la fin de ce compte, ce compte est correct car nous avons une section à l'intérieur de notre route vers le fichier qui gère toute information variable juste après notre compte. Mais si nous remplaçons la section complète par quelque chose de aléatoire, aucun contenu ne sera affiché dans notre itinéraire de visualisation. Pour cela, nous pouvons configurer un composant global , tel qu'une page 44, qui s'affichera si aucun autre itinéraire ne correspond. Pour cela, passons à nos composants et créons un nouveau fichier appelé Not Found of view. Alors un simple template insider ici convient, avec le titre de page introuvable. OK, pour l' utiliser dans notre routeur, nous devons l'importer tout en haut du fichier. Importation introuvable. Cela se trouve dans des composants introuvables. Ensuite, à la fin de notre tableau de routes, je vais créer un nouvel objet pour gérer cela. Configurez-le comme dans l'objet ci-dessus. Nous devons tracer une voie, comme nous le faisons toujours. Mais nous y reviendrons dans un instant. Nous ajouterons un nom introuvable, puis nous rendrons notre composant. Si vous avez déjà utilisé l'itinéraire d'une vue 2 par le passé, nous pouvions auparavant suivre tous les autres itinéraires qui ne correspondent pas à ceux indiqués ci-dessus en ajoutant simplement une étoile. Mais maintenant, en utilisant la version trois de vue et la route de vue de quatre, nous devons plutôt utiliser un paramètre personnalisé. Nous procédons de la même manière que les segments dynamiques que nous avons ajoutés juste au-dessus. Au lieu de l'étoile, nous allons ajouter un segment avant puis un segment dynamique qui sera capturé dans la variable appelée nom du chemin. Ce nom de chemin peut être celui que vous choisissez. La différence entre View router 2.3 est également que nous devons maintenant ajouter une expression régulière qui est l'étoile. Et cela correspondra à n'importe quel nom de route donné. Maintenant, si nous saisissons une URL qui n' est reconnue par aucune autre route, nous verrons que notre page est introuvable. Essayons-en un autre. C'est très bien. Cliquez sur nos liens reconnus et le bon composant s'affiche toujours Si nous le voulions, nous pourrions également accéder à n'importe lequel de ces paramètres saisis, comme cette chaîne de texte Et nous pouvons le faire à l'intérieur du composant introuvable, comme nous l'avons déjà fait. Nous pouvons accéder à la route symbolisée par le dollar. Nous avons accès au nom de notre chemin, qui est le même que celui que nous avons donné dans le routeur. Mais qu'en est-il si nous avions plusieurs segments ? Si l'utilisateur a saisi quelque chose comme ça ? Nous pouvons voir que le Pam est toujours affiché à l'intérieur du modèle Cependant, le routeur l' affiche sous forme de chaîne de texte plutôt que deux paramètres distincts. Si vous souhaitez les diviser en plusieurs valeurs pour y accéder, comme cette section et cette section, nous pouvons plutôt créer un tableau de paramètres pour le configurer Revenez dans notre routeur. Nous ajoutons un point de départ supplémentaire à la fin du parcours. Maintenant, si nous sauvegardons et revenons en arrière, lieu d'avoir une chaîne de paramètres comme c'était le cas auparavant, nous avons maintenant un tableau contenant deux valeurs distinctes. Cela nous donne désormais la possibilité d'utiliser ces paramètres individuellement si nécessaire. De plus, le View Router est vraiment flexible. Il ne suffit pas d'avoir une seule page introuvable. Nous pourrions avoir 44 pages pour différents segments incorrects. Par exemple, si c'était admin et que le dernier segment était incorrect, nous souhaiterons peut-être afficher une page 44 différente pour toute erreur liée à l'administration. La façon de le faire est de revenir à notre interface externe, dupliquons cette dernière section, Pac ci-dessus. Nous pourrions ensuite sélectionner l'administrateur de la voie à suivre. Ensuite, toute section non reconnue qui est ajoutée par la suite sera stockée dans son paramètre appelé nom de chemin Ou vous pouvez également le renommer pour qu' il soit plus descriptif si vous le souhaitez Mais l'idée ici est simplement que le nom du chemin ne stockera ce segment plutôt que l'URL complète que nous avions auparavant. Nous pourrions ensuite personnaliser notre page introuvable en fonction de cet itinéraire exact. Supprimons simplement cet exemple avant d'entrer, nous l'ajouterons à l'intérieur de l'élément P et nous dirons qu'aucune page d' administration n'a été trouvée puis nous pouvons afficher notre section dynamique, nous dirons route en symbole dollar. Ensuite, nous pouvons accéder à la propriété path dans laquelle nous sommes actuellement en train de saisir, il y a notre message d'erreur en bas. Voici un exemple de la façon dont nous pouvons créer un seul composant de 44 pages introuvable. Nous pouvons également être plus précis et adapter ces messages à notre itinéraire particulier. 8. Navigation programmée: Mais maintenant, nous cherchons comment passer d'une page ou d'un composant à l'autre à l'aide du lien du routeur. Le lien du routeur placera un bouton sur notre page, sur lequel nous pouvons cliquer pour afficher le composant souhaité. Mais il existe également d'autres moyens que nous pouvons utiliser pour passer d' une page à l'autre dans notre application. Nous pouvons également le faire par programmation plutôt que de nous fier à ces boutons Plus tôt, nous avons brièvement examiné l'accès à l'instance du routeur à l'aide d'un routeur symbole dollar Cela est accessible dans notre script ou dans notre modèle et nous donne accès à des éléments tels que les paramètres de notre code Cela expose également de nombreux autres éléments, tels que la possibilité de naviguer à l' aide de méthodes telles que le push Cela signifie que nous pouvons également intégrer la navigation à des éléments tels que nos méthodes dans le script ou à n'importe quel écouteur de clics à l'intérieur de notre modèle Par exemple, si nous plaçons dans un titre de niveau 1 n'importe où dans notre enveloppe, je vais simplement dire le titre du site. Ce que nous pouvons faire ici, c'est écouter un clic sur cet élément où nous pouvons accéder à notre routeur symbolisé par le dollar. Et une méthode appelée push, qui va nous pousser à l'endroit souhaité. S'il s'agit d'un titre, il serait judicieux de le lier à notre URL d'accueil. Voyons comment cela fonctionne dans le navigateur. Accédez à n'importe quelle autre page. C'est un peu compliqué maintenant, mais cliquez sur le titre du site. Cela nous ramène ensuite à l'URL d'accueil. Nous allons en essayer un autre. Accédez à l'utilisateur, cliquez sur le titre du site, et tout fonctionne correctement. Nous pouvons également utiliser la méthode push et toutes les autres méthodes que nous allons examiner dans notre script. Et aussi la fonction de configuration : si nous accédons à notre vue utilisateur à l'intérieur d'ici, nous pouvons également accéder au routeur push et l' utiliser dans notre script. Nous allons essayer ça. Disons que nous allons passer à n'importe quelle UPRL créée, telle que le test Ensuite, pour essayer cela, nous allons l' intégrer à un délai défini, en passant toute fonction qui s' exécutera au bout de 2 secondes. Nous pouvons donc découper ce code, coller dans notre time out. Passons à la page et passons à la vue utilisateur. Ensuite, 2 secondes plus tard, notre fonction est exécutée et nous sommes poussés vers le test avancé. Cela peut être utile pour pousser un utilisateur vers la zone de comptoir après s'être connecté, car nous pouvons également y accéder dans nos méthodes. Supprimons maintenant ce délai défini et revenons à vue par points de notre application où nous pouvons examiner une autre méthode appelée remplacer. Celui-ci est un symbole de poupée, remplacez-le. Tout comme le push du routeur et toutes les autres méthodes que nous allons découvrir, elles peuvent également être utilisées dans le cadre de la configuration du script. Cliquons en toute sécurité sur le compte ou sur toute autre page du titre du site. Encore une fois, tout comme pour la méthode push, nous sommes également renvoyés à l'URL d'accueil. Cela fonctionne de manière très similaire à la méthode push, mais il y a une différence. Lorsque vous naviguez dans le navigateur, chacune des pages que nous visitons est ajoutée à l' historique des entrées précédent C'est ainsi que nous pouvons utiliser ces boutons de retour et de transfert dans le navigateur. Mais la différence entre ces deux méthodes est que lorsque vous utilisez la méthode push, toutes ces entrées sont toujours ajoutées à l'historique du navigateur. Cependant, comme il semble, avec la méthode replace, elle remplacera l' entrée actuelle plutôt que d'en ajouter deux. Pour le dire, actualisons-nous pour effacer l'historique. Cliquez sur le compte. Cliquez maintenant sur le titre du site pour revenir à la page d'accueil. Maintenant, si nous cliquons sur le bouton de retour, vous vous attendez à être redirigé vers le compte. Nous ne le faisons pas, car ce remplacement a remplacé l'itinéraire précédent au lieu d'être ajouté à l'historique. Nous pouvons voir la différence. Si nous appuyons à nouveau sur Push, actualisons, nous irons sur la page du compte, puis cliquerons sur le titre du site. Mais si nous cliquons sur le bouton de retour, puisque tout l'historique est enregistré dans le navigateur, celui-ci est ensuite ramené à la page de compte précédente. Une autre méthode de routeur à laquelle nous avons accès est suivante : elle permet de naviguer dans les entrées du navigateur, comme nous venons de l'apprendre. Lorsque nous parcourons différentes pages de notre application, toutes ces pages sont stockées dans l' ordre dans l'historique du navigateur. Nous pouvons ensuite naviguer en arrière ou en avant dans autant de ces entrées d'historique que nous le souhaitons. Si nous voulions revenir aux pages, lorsque nous cliquons dessus, nous pouvons utiliser Router do go en passant une valeur de moins deux. Essayons ça. Nous allons revenir à la route d'origine. Nous allons accéder à l'utilisateur, au compte, au profil. Maintenant, deux pas en arrière, ce serait notre utilisateur, cliquez sur le titre du site et nous revenons à l'itinéraire utilisateur Si nous ne faisions que revenir en arrière ou en avant d'une seule page. Ce sont également deux méthodes que nous pouvons utiliser, à savoir le retour et le transfert, qui ont accès au et cela ne nécessite aucun argument. Comme vous vous en doutez, si nous effaçons l'historique, nous devons également si nous effaçons l'historique, accéder au compte personnel. Cela nous ramène d'un pas à l' élément d'historique précédent, à savoir l'utilisateur. D'autres méthodes de routeur sont également disponibles. Si vous souhaitez en savoir plus, vous pouvez trouver plus d'informations sur la page de documentation du routeur View. Mais pour l'instant, voici quelques-unes des méthodes les plus courantes que vous pouvez utiliser dans votre projet. 9. Merci: Félicitations, vous avez maintenant atteint la fin de ce cours. J'espère que vous avez apprécié ce cours et que vous avez maintenant une meilleure compréhension du package View Router et de ce qu' il peut apporter à vos projets View GS. Nous savons maintenant que le routage n'est pas toujours aussi simple que de cliquer sur un lien et de le rediriger vers une nouvelle page Nous avons abordé de nombreux packages View Router, fonctionnalités telles que le transfert d' informations entre les itinéraires. Nous avons utilisé des chaînes de requête, nous avons utilisé des paramètres. Nous avons utilisé des itinéraires dynamiques pour nous permettre d' utiliser des variables à l'intérieur de nos URL. Nous avons expliqué comment configurer la navigation imbriquée, comment appliquer un style aux différents états des liens, et bien plus encore Je vous remercie donc d'avoir pris le temps d'assister à ce cours. J'espère que cela vous a plu et je vous verrai bientôt dans un autre cours.