Maison >interface Web >js tutoriel >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 actuelleSi 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
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 :
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
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).
<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 hachageL'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 :<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模拟出浏览器历史记录栈的功能。当然，以上只是一些核心逻辑，为保证系统的鲁棒性源码中还有大量的辅助逻辑，也很值得学习。
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!