Explication détaillée de l'utilisation du routage frontal pour l'application monopage de vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du routage frontal pour les applications Vue monopage. Quelles sont les précautions pour l'utilisation du routage frontal pour les applications Vue monopage. Voici des cas pratiques, jetons un oeil.

est écrit devant : Il existe généralement deux façons d'implémenter le routage frontal dans SPA :

1. window.history

2. location.hash

Ce qui suit est une introduction à la façon dont ces deux méthodes sont mises en œuvre

historique

1. Introduction de base à l'historique

L'objet window.history contient l'historique du navigateur. L'objet window.history n'a pas besoin d'utiliser le préfixe window lorsque. l'écrire. L'historique est une méthode courante pour implémenter le routage frontal SPA. Il existe plusieurs méthodes originales :

1. history.back() - la même chose que de cliquer sur le bouton Précédent du navigateur

   .

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

3. history.go(n) - Accepte un entier comme argument, se déplaçant à La page spécifiée par cet entier, par exemple, go(1) équivaut à forward(), go(-1) équivaut à back(), go(0) équivaut à actualiser la page actuelle

4. 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, le history object propose la méthode pushState() et la méthode replaceState(), ces deux méthodes peuvent être utilisées pour ajouter des données à la pile historique, tout comme si l'url changeait (dans le passé, seule la pile de l'historique des modifications d'url changerait ), afin que vous puissiez bien simuler l'historique de navigation et le transfert. Après le retrait, le routage frontal actuel est également implémenté sur la base de ce principe. La méthode

2.history.pushState

pushState(stateObj, title, url) écrit des données dans la pile historique, et son premier paramètre est ce qui doit être écrit. objet (pas plus de 640 Ko), le deuxième paramètre est le titre de la page et le troisième paramètre est l'url (chemin relatif).

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

2. title : Le titre de la nouvelle page, mais tous les navigateurs ignorent actuellement cette valeur, donc null peut être renseigné ici.

3. 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éclenche pas l'actualisation de la page, mais entraîne uniquement la modification de l'objet historique et de la barre d'adresse. réagira. Le navigateur s'actualisera uniquement lorsque des événements tels que l'avant et l'arrière (back() et forward(), etc.) sont déclenchés

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 l'utilisateur, donc lorsque la politique de même origine est violée, une erreur sera signalée

3.history.replaceState

La différence. entre replaceState(stateObj, title, url) et pushState, c'est qu'il ne s'agit pas d'écrire mais de remplacer et de modifier l'enregistrement actuel dans l'historique de navigation. Le reste est exactement le même que pushState

4.popstate. event

Définition : Chaque fois que l'historique de navigation du même document (lorsque l'objet history) 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. Seul l'utilisateur clique sur le bouton Précédent et Suivant du navigateur, ou utilise JavaScript pour appeler le bouton Précédent, Suivant, et go méthodes. Il ne sera déclenché que quand. De plus, cet événement ne cible que le même document. Si l'historique de navigation change et que différents documents sont chargés, 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).

5.history implémente le code de routage frontal du spa

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

Le e.state imprimé dans la fonction d'écoute popstate est la troisième valeur transmise dans history.pushState () Un paramètre, le voici {name: 'api'}

二.Hash

1.Hash基本介绍

url 中可以带有一个 hash http://localhost:9000/#/a.html

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

1. 直接更改浏览器地址，在最后面增加或改变#hash；

2. 通过改变location.href或location.hash的值；

3. 通过触发点击带锚点的链接；

4. 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

2.Hash实现spa前端路由代码

  // 注册路由
  document.querySelectorAll('.api').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)

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js实现操作class的方法

D3.js实现动态仪表盘案列

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!