Parlons des deux modes de routage de Vue (hash et historique)

Le routeur a deux modes : l'un est le mode hash et l'autre est le mode historique lors de l'utilisation de vue-cli ainsi que. le projet vue construit par défaut dans vue-router, si aucune configuration particulière n'est faite, la valeur par défaut est le mode hashhash模式、另一种是history模式，在使用vue-cli以及vue-router默认搭建的vue项目，如果不做特殊的配置，默认就是hash模式

这两种模式各有自己的优势，但他们的使用区别，却多多少少都会在面试当中被问到

今天就一起来学习下

哈希模式(hash)

vue-router默认hash模式,使用url的哈希(hash)来模拟一个完整的URL,当URL改变时,页面不会重新加载。【相关推荐：vuejs视频教程、web前端开发】

如下所示

http://localhost/#home

特点: #号后面的参数不会传送给服务器,兼容性好,不会作为路径的一部分发送给服务器,也就是它不会包括在HTTP请求体中,对后端完全没有影响,只是我们前端同学自己玩

页面刷新时,会停留在当前页面,不会重新加载

如果觉得hash路径很丑,不简洁,我们可以用路由的history模式,这种模式充分利用history.pushState API或replaceState,来完成,url跳转而无需重新加载页面

历史模式

history模式:在实例化配置对象中添加mode模式,值为history就可以了的 经过改造后,hash模式就会变成history模式

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

这两种方式的使用都是没啥问题的,如果你在意浏览器url的颜值,#符号掺杂在url里看起来确实有些不优雅

如果你想url更好看,那么就使用history模式

但是:在hash模式下,使用hash符号之前的内容会被包含在请求体中,#号后面的不会发送给服务器

而history模式下,前端的URL必须和实际向后端发起请求的URL保持一致

如:https://itclan.cn/fontend/id,如果后端缺少没有对/fontend/id的路由处理,那么它将返回404错误

如果你想要支持history模式,那么需要后端同学支持,想要彻底解决404的问题,需要与后端同学协商,因为需要后端与前端路由做匹配

在服务端增加一个覆盖所有情况的时候的候选资源,如果url匹配不到任何静态资源,应该返回一个首页页面

如果出现404,容易让用户觉得这是一个Bug

如何解决前台刷新页面404问题

解决这个问题:如果你用的是Node做后端服务,那么在Node后台中可以加入一个中间件比如：connect-history-api-fallback即可解决这种404问题

如果是java或php,找后端同学,让后端路由与前端路由做匹配,或是用Ngnix做中间代理

如下这段简易的Node服务代码，可以命名为server.js,同时安装express以及connect-history-api-fallback中间件

启动后端服务执行命令node server.js

const express = require('express');
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'));


app.listen(5005,(err)=> {
  if（！err）consle.log('服务器启动成功了')
})

把前端打包生成的dist文件内的代码,放到static中,通过这一操作,即可解决刷新页面,404的问题

对单页面spa的应用理解

我们的前端使用的vue-router中的两种模式,就是单页面应用,整个应用只有一个router路由器,是可以通过$router属性获取到

也就是说,整个应用只有一个完整的页面,同时,点击页面中的导航链接,不会刷新页面,只会是页面的局部更新

而我们页面中的数据,往往需要通过ajax请求来获取

现在开发的新项目,都是前后端分离,基本上都是单页面应用

总结

前端路由,有两种模式,一种是hash模式,另一种是history模式,其中hash模式是默认模式,#后面的不会发送给服务端,不会重新刷新加载页面,而history模式,url虽然比较好看,但是想要完整支持,需要后端同学提供支持,后端路由与前端的路由需要做匹配

否则部署到线上,一刷新页面,会出现404

Ces deux modes ont leurs propres avantages, mais leurs différences d'utilisation seront plus ou moins posées lors des entretiens🎜🎜Apprenons ensemble aujourd'hui🎜

Mode de hachage (hash) h2>🎜vue-router est par défaut en mode hash, en utilisant le hachage de url (hash) pour simuler une URL complète , lorsque URL change, la page ne se rechargera pas. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]🎜🎜Comme indiqué ci-dessous🎜rrreee🎜Fonctionnalités : Les paramètres après le numéro # ne seront pas envoyés au serveur. Ils ont une bonne compatibilité et ne seront pas envoyés au serveur dans le cadre du chemin, c'est-à-dire qu'ils ne le seront pas. inclus dans la requête HTTP Dans le corps, cela n'a aucun impact sur le backend. C'est juste que nos étudiants front-end jouent seuls🎜🎜Lorsque la page est actualisée, elle restera allumée. la page actuelle et ne sera pas rechargée🎜🎜Si vous pensez que le chemin hash est moche et pas concis, nous pouvons utiliser le mode historique du routage, qui utilise pleinement API history.pushState ou replaceState, pour compléter, urlSauter sans recharger la page🎜<h2 data-id="heading-2">Mode Historique </h2>🎜Mode <code>history : Ajoutez dans le mode mode objet de configuration instancié, la valeur est history Après modification, le mode hash deviendra le mode historique🎜rrreee🎜Il n'y a aucun problème à utiliser ces deux méthodes, si vous vous souciez du navigateur L'apparition de url, le symbole # mélangé dans url a l'air un peu inélégant🎜🎜Si vous voulez changer url Ça a l'air bien, utilisez ensuite le mode historique🎜🎜Mais : dans le mode hash, le contenu avant d'utiliser le symbole hash sera inclus dans le corps de la requête, ce qui suit le numéro # ne sera pas envoyé au serveur🎜🎜Et en mode historique, l'URL du front end doit être le identique à la requête réelle adressée au backend, URL reste cohérente🎜🎜Par exemple : https://itclan.cn/fontend/id, si le backend est manquant, il y a aucun traitement de routage /fontend/id correspondant, alors il renverra une erreur 404🎜🎜Si vous souhaitez prendre en charge le mode historique, vous devez revenir en arrière -support final. Si vous souhaitez résoudre complètement le problème 404, vous devez négocier avec les camarades de classe back-end, Parce que les itinéraires back-end et front-end doivent correspondre🎜🎜Ajouter un candidat. ressource sur le serveur pour couvrir toutes les situations, si url ne peut pas correspondre. Toute ressource statique doit renvoyer une page d'accueil🎜🎜Si 404 apparaît, il est facile pour les utilisateurs de penser qu'il s'agit d'un bug🎜

Comment résoudre le problème 404 de l'actualisation de la page au premier plan

🎜Résoudre cette question : si vous utilisez Node comme service back-end, vous peut ajouter un middleware à l'arrière-plan du Node tel que : connect-history-api-fallback peut résoudre ce problème 404🎜🎜S'il s'agit de <code>java ou php, trouvez un camarade de classe back-end pour faire correspondre le routage back-end avec le routage front-end, ou utilisez Ngnix qui agit comme un proxy intermédiaire🎜🎜Ce qui suit est un simple code de service Node, qui peut être nommé server.js et installer express et <code>connect-history-api -fallback middleware🎜🎜démarrer la commande d'exécution du service back-end node server.js🎜rrreee🎜packager le front-end généré Mettre le code dans la dist fichier en static Grâce à cette opération, vous pouvez résoudre le problème de rafraîchissement de la page et 404🎜

Comprendre l'application de spa d'une seule page

🎜Les deux modes dans vue-router que notre frontal utilise sont des applications d'une seule page, et l'application entière n'a qu'un seul routeur Le routeur peut être obtenu via l'attribut $router. En d'autres termes, l'ensemble de l'application n'a qu'une seule page complète. En même temps, cliquer sur le lien de navigation dans la page ne rafraîchira pas la page. ne sera qu'une mise à jour partielle de la page🎜🎜Et les données de notre page doivent souvent être obtenues via une requête ajax🎜🎜Les nouveaux projets développés maintenant sont tous séparés du front-end et du back-end, en gros Application à page unique🎜

Résumé

🎜Routage frontal, il existe deux modes, l'un est le mode hash, l'autre est mode history , où le mode hash est le mode par défaut, le # suivant ne sera pas envoyé au serveur et la page de chargement ne sera pas actualisée, tandis que En mode historique, url semble meilleur, mais si vous souhaitez une assistance complète, vous avez besoin de l'assistance de vos camarades de classe back-end. Le routage back-end et le routage front-end doivent le faire. match🎜🎜 Sinon, déployez-le en ligne et actualisez la page, il y aura un problème 404🎜

(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base)

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!