Explication détaillée du principe de mise en œuvre du routage de vuejs

Cet article vous apporte une explication détaillée du principe de mise en œuvre du routage de vuejs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans le code source général, window.history et location.hash sont utilisés

implémentation de l'historique

L'objet window.history contient l'historique du navigateur, et de la fenêtre. l'objet history est utilisé lors de l'écriture. Vous n'avez pas besoin d'utiliser le préfixe window. L'historique est une méthode courante pour implémenter le routage frontal SPA. Il existe plusieurs méthodes originales :

history.back()

Identique à cliquer sur le bouton retour dans le navigateur<.>

history.forward()Identique à cliquer sur le bouton Suivant dans le navigateur

history.go(n)

Accepte un entier comme paramètre et se déplace vers la page spécifiée par l'entier. Par exemple, go(1) est équivalent à forward(), go(-1) est équivalent à back(), go(0) est équivalent. pour actualiser la page actuelle

Si la position déplacée dépasse la limite de l'historique d'accès. Les trois méthodes ci-dessus ne signalent pas d'erreur, mais échouent silencieusement

En HTML5, l'objet history propose le pushState(). et la méthode replaceState(). Ces deux méthodes peuvent être utilisées pour ajouter des données à la pile d'historique, comme si l'URL avait changé (dans le passé, seule l'URL changeait et la pile d'historique changeait), afin que vous puissiez simuler la navigation. historique et en avant et en arrière très bien. Le routage frontal actuel est également basé sur ce principe de. La méthode

history.pushState

pushState(stateObj, title, url) écrit les données dans la pile historique. Son premier paramètre est l'objet de données à écrire (pas plus de 640 Ko). Le paramètre est le titre de la page et le troisième paramètre est l'url (chemin relatif).

stateObj : Un objet d'état lié à l'URL spécifiée Lorsque l'événement popstate est déclenché, cet objet sera transmis à la fonction de rappel. Si cet objet n'est pas nécessaire, null peut être renseigné dans ce *.

title : Le titre de la nouvelle page, mais tous les navigateurs ignorent actuellement cette valeur, donc null peut être renseigné ici.
url : La nouvelle URL doit être dans le même domaine que la page actuelle. La barre d'adresse de votre navigateur affichera cette URL.
Il y a plusieurs choses à noter à propos de pushState :

La méthode pushState ne déclenchera pas d'actualisation de page, mais entraînera une modification de l'objet d'historique et la barre d'adresse réagira uniquement lorsque des événements tels que le transfert. et en arrière sont déclenchés (back () et forward (), etc.)

L'URL ici est restreinte par la politique de même origine pour empêcher les scripts malveillants d'imiter les URL d'autres sites Web pour tromper les utilisateurs, donc lorsque la politique de même origine est violé, une erreur sera signalée

history.replaceState

La différence entre replaceState(stateObj, title, url) et pushState est qu'il n'écrit pas mais remplace et modifie l'enregistrement actuel dans l'historique de navigation. Le reste est exactement le même que pushState.

Événement popstate

Définition : Chaque fois que l'historique de navigation (c'est-à-dire l'objet historique) du même document change, l'événement popstate sera déclenché.

Remarque : le simple fait d'appeler la méthode pushState ou la méthode replaceState ne déclenchera pas cet événement. Il ne sera déclenché que lorsque l'utilisateur clique sur le bouton Précédent et Suivant du navigateur, ou utilise JavaScript pour appeler les méthodes Précédent, Suivant et Aller. De plus, cet événement ne cible que le même document. Si le changement d'historique de navigation entraîne le chargement de différents documents, cet événement ne sera pas déclenché.
Utilisation : lors de l'utilisation, vous pouvez spécifier une fonction de rappel pour l'événement popstate. Le paramètre de cette fonction de rappel est un objet événement et son attribut state pointe vers l'objet state fourni par les méthodes pushState et replaceState pour l'URL actuelle (c'est-à-dire le premier paramètre de ces deux méthodes).

HISTORY implémente le code de routage frontal SPA

<a class="spa">abc.html</a>
<a class="spa">123.html</a>
<a href="/rdhub" class="spa ">rdhub</a>
  // 注册路由
  document.querySelectorAll('.spa').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      let link = item.textContent;
      if (!!(window.history && history.pushState)) {
        // 支持History API
        window.history.pushState({name: 'history'}, link, link);
      } else {
        // 不支持,可使用一些Polyfill库来实现
      }
    }, false)
  });

  // 监听路由
  window.addEventListener('popstate', e => {
    console.log({
      location: location.href,
      state: e.state
    })
  }, false)
popstate监听函数里打印的e.state便是history.pushState()里传入的第一个参数，在这里即为{name: 'history'}

hash

Introduction de base au hachage

L'URL peut contenir un hachage http : / /localhost:9000/#/rdhub.html

Un événement dans l'objet window est onhashchange Cet événement sera déclenché dans les situations suivantes :

1. Modifiez directement l'adresse du navigateur. , dans Ajouter ou modifier #hash à la fin

2. en modifiant la valeur de location.href ou location.hash

3. en déclenchant ; un clic avec point d'ancrage Lien

4. La navigation vers l'avant et vers l'arrière peut entraîner une modification du hachage, à condition que les valeurs de hachage dans les deux adresses de pages Web soient différentes.

Hash implémente le code de routage frontal SPA

<a href="/rdhub" class="spa">rdhub</a>
<a href="/abc" class="spa">abc</a>
<a href="/123" class="spa">123</a>
<a href="/hash" class="spa">hash</a>
  document.querySelectorAll('.spa').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      let link = item.textContent;
      location.hash = link;
    }, false)
  });
  // 监听路由
  window.addEventListener('hashchange', e => {
    console.log({
      location: location.href,
      hash: location.hash
    })
  }, false)

hash模式与history模式，这两种模式都是通过浏览器接口实现的，除此之外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。当然，以上只是一些核心逻辑，为保证系统的鲁棒性源码中还有大量的辅助逻辑，也很值得学习。

Comparaison de deux modes

Paramètre PushState new L'URL peut être n'importe quelle URL qui a la même origine que l'URL actuelle ; et le hachage ne peut modifier que la partie après #, donc seule l'URL du même document que celui actuel peut être définie

Le nouveau L'URL définie par pushState peut être exactement la même que l'URL actuelle, donc l'enregistrement sera également ajouté à la pile ; la nouvelle valeur définie par le hachage doit être différente de l'original pour déclencher l'ajout de l'enregistrement à la pile

pushState peut ajouter n'importe quel type de données à l'enregistrement via stateObject ; tandis que le hachage uniquement, des chaînes courtes peuvent être ajoutées

pushState peut en outre définir l'attribut titre pour une utilisation ultérieure

Un problème avec le mode historique

Nous savons que pour les applications monopage, le scénario d'utilisation idéal est de charger uniquement index.html lors de la saisie de l'application, et les opérations réseau ultérieures sont effectuées via Ajax, et seront ne pas être basé sur L'URL demande à nouveau la page, mais il est inévitable de rencontrer des circonstances particulières, telles que l'utilisateur tapant directement dans la barre d'adresse et appuyant sur Entrée, le navigateur redémarre et recharge l'application, etc.

Le mode hachage modifie uniquement le contenu de la partie hachage, et la partie hachage ne sera pas incluse dans la requête HTTP :

http://rdhub.cn/#/user/id / / Tel que La nouvelle demande n'enverra que http://rdhub.cn/
, il n'y aura donc aucun problème lors de la demande d'une page basée sur l'URL en mode hachage.

Le mode historique modifiera l'URL pour qu'elle soit la même que l'URL normale du backend de la requête
http://rdhub.cn/user/id
Dans ce cas, renvoyez la requête au backend , si le backend n'est pas configuré avec un traitement de routage correspondant à /user/id, une erreur 404 sera renvoyée.

La solution officiellement recommandée consiste à ajouter une ressource candidate sur le serveur qui couvre toutes les situations : si l'URL ne correspond à aucune ressource statique, elle doit renvoyer la même page index.html, dont dépend votre application. sur. Dans le même temps, après cela, le serveur ne renverra plus de page d'erreur 404, car le fichier index.html sera renvoyé pour tous les chemins. Pour éviter cela, couvrez toutes les situations de routage dans l'application Vue puis donnez une page 404. Ou, si vous utilisez Node.js comme backend, vous pouvez utiliser le routage côté serveur pour faire correspondre l'URL et renvoyer 404 lorsqu'aucune route ne correspond, implémentant ainsi une solution de secours.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!