Comment utiliser vue pour effectuer un routage frontal pour les applications monopage

Cette fois, je vais vous montrer comment utiliser vue pour effectuer un routage front-end pour les applications monopage. Quelles sont les précautions à prendre pour utiliser vue pour effectuer un routage front-end pour les applications monopage ? jetez 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éplace à 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, l'objet historique. 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 d'historique, comme si l'url changeait (dans le passé, seule l'url changeait et la pile d'historique changeait), afin que vous puissiez très bien simuler l'historique de navigation et avancer et reculer. 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é, cet 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. 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 boutons Précédent, Suivant et Suivant. allez méthodes. 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).

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, voici {name: 'api'>

2. Hash

1. Introduction de base au Hash.

L'URL peut contenir un hachage 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怎样部署nginx案例（附代码）

从零开始操作AngularJS实现应用模块化

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!