[Compilation et partage] Quelques questions d'entretien liées à vue-router (avec analyse des réponses)-Voir.js-php.cn

Cet article résume et partage quelques questions d'entretien liées à vue-router (avec analyse des réponses) pour vous aider à trier les connaissances de base et à améliorer votre réserve de connaissances sur vue-router. Cela vaut la peine d'être collecté, venez y jeter un œil !

[Compilation et partage] Quelques questions d'entretien liées à vue-router (avec analyse des réponses)

Le principe de vue-router

Dans une application monopage, la commutation entre différents composants doit être implémentée via le routage frontal.

Routage frontal

1. La clé est le chemin, la valeur est le composant, utilisé pour afficher le contenu de la page
2. Processus de travail : lorsque le chemin du navigateur change, le composant correspondant sera affiché. La fonction de routage de
vue-router : vue-router的路由作用：将组件映射到路由, 然后渲染出来

主要就是

如何改变URL却不引起页面刷新
如何检测到URL变化了【相关推荐：vuejs视频教程、web前端开发】

路由的hash模式

hash 是 URL 中 # 及后面的那部分，#后的url不会发送到服务器，所以改变 URL 中的 hash 部分不会引起页面刷新
window可以监听onhashchange事件变化。当hash变化时，读取#后的内容，根据信息进行路由规则匹配，通过改变 window.location.hash 改变页面路由。

改变URL的三种方式

通过浏览器前进后退改变 URL
通过标签改变 URL
通过window.location改变URL

优点

只需要前端配置路由表, 不需要后端的参与
兼容性好, 浏览器都能支持
hash值改变不会向后端发送请求, 完全属于前端路由

缺点

hash值前面需要加#, 不符合url规范,也不美观

路由的history模式 - 利用H5的history API

html5 的history Interface 中新增的pushState() 和 replaceState() 方法，用来在浏览历史中添加和修改记录，改变页面路径，使URL跳转不会重新加载页面。
类似hashchange 事件的 popstate 事件，但 popstate 事件有些不同：
只有在做出浏览器的行为才会调用 popState，用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。

优点

符合url地址规范, 不需要#, 使用起来比较美观

缺点

在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

$route和$router有什么区别？

$router是VueRouter的实例对象,表示整个应用的唯一路由器对象。包含了路由跳转的方法、钩子函数等。
$route是当前路由对象,表示本组件的路由规则，每一个路由都会有一个route对象，是一个局部对象。

vue-router参数传递的几种方式，有什么区别?

, web développement front-end 】

-	描述	如何指定跳转的路由	如果没有传参	可以传参没有要求的值吗
params参数	`路径/params参数`	必须要使用name指定路由	params是路由的一部分,如果在配置了占位符必须要有如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。	传递路径上没有的占位符，地址栏上不会显示并且刷新会丢失
query参数	`路径? key1=val1 & key2=val2....`mapper les composants sur les routes, puis les restituer	principalement	Comment pour modifier l'URL sans actualiser la page	Comment détecter le changement d'URL [Recommandations associées : tutoriel vidéo vuejs

🎜Le mode de hachage du routage🎜

🎜hash est la partie entre # et ce qui suit dans l'URL. L'URL après # ne sera pas envoyée au serveur, 🎜 donc en changeant le la partie de hachage dans l'URL n'entraînera pas l'actualisation de la page 🎜🎜
🎜la fenêtre peut surveiller les modifications de l'événement onhashchange. Lorsque le hachage change, lisez le contenu après #, faites correspondre les règles de routage en fonction des informations et modifiez le routage des pages en modifiant window.location.hash. 🎜

🎜🎜Trois façons de modifier l'URL🎜🎜

Modifiez l'URL via le navigateur en avant et en arrière
Modifiez l'URL via des balises
Changer l'URL via window.location

🎜🎜Avantages🎜🎜

Seul le front-end doit configurer la table de routage, aucune implication du back-end n'est requise li>
Bonne compatibilité, le navigateur peut être pris en charge
🎜Les modifications de la valeur de hachage n'enverront pas de requête au backend, il s'agit d'un routage entièrement frontal🎜

🎜🎜 Inconvénients🎜🎜

La valeur de hachage est obligatoire devant L'ajout de # n'est pas conforme à la spécification de l'URL et n'est pas beau

🎜. 🎜Le mode historique de routage - en utilisant l'API d'historique de H5🎜

Les nouveaux pushState() et replaceState() dans l'interface historique de 🎜html5 sont utilisées pour ajouter et modifier des enregistrements dans l'historique de navigation, changer le chemin de la page, 🎜faire sauter l'URL sans recharger la page🎜. 🎜
🎜L'événement popstate est similaire à l'événement hashchange , mais l'événement popstate est un peu différent : 🎜 ne sera appelé qu'après avoir fait 🎜 le comportement du navigateur🎜 popState est déclenché lorsque l'utilisateur clique sur le bouton Précédent et Suivant du navigateur, ou appelle les méthodes History.back(), History.forward() et History.go() à l'aide de JavaScript. 🎜

🎜🎜Avantages🎜🎜

🎜Conformez-vous aux spécifications d'adresse URL, aucun # n'est nécessaire et c'est plus beau à utiliser🎜

🎜🎜 Inconvénients🎜🎜

Lorsque l'utilisateur saisit manuellement l'adresse ou actualise la page, une demande d'URL sera lancée. Le backend doit configurer la page index.html afin que l'utilisateur ne puisse pas faire correspondre la ressource statique, sinon une. Une erreur 404 se produira.
Compatible Les performances sont relativement médiocres. Il utilise les nouvelles méthodes pushState() et replaceState() dans l'objet HTML5 History, ce qui nécessite le support de navigateurs spécifiques.

🎜🎜Quelle est la différence entre $route et $router ? 🎜🎜🎜$router est un objet instance de VueRouter, représentant le seul objet routeur pour l'ensemble de l'application. Contient des méthodes de saut de routage, des fonctions de hook, etc. 🎜 $route est l'objet de routage actuel, qui représente les règles de routage de ce composant. Chaque route aura un objet route, qui est un objet local. 🎜🎜

🎜🎜Les paramètres du routeur Vue-router sont transmis de plusieurs manières, quelles sont les différences ?🎜🎜

Paramètre Path/params

Chemin key1=val1 & key2=val2.. ..🎜🎜1. Vous pouvez utiliser le nom pour spécifier la route🎜2 Vous pouvez utiliser le chemin pour spécifier la route🎜🎜la requête est un paramètre ajouté après l'URL, peu importe si vous ne le faites pas. je ne l'ai pas🎜🎜la requête ne le fera pas🎜🎜🎜🎜<h3>
<a id="vuerouter_65"></a><strong>Problème de perte de paramètre vue-router</strong>
</h3>
<p>Lorsque le paramètre params est passé, les paramètres reçus par l'espace réservé de réglage sont transmis, la barre d'adresse ne sera pas affichée et l'actualisation sera perdue. </p>
<p>Solution : Vous pouvez obtenir les paramètres via <code>this.$route.params

this.$route.params

vue-router有几种钩子函数？具体是什么及执行流程是怎样的？

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

全局路由守卫 : 可以有多个根据创建顺序调用。
- router.beforeEach() 全局前置守卫,每次导航时都会触发。
- router.afterEach() 全局后置路由守卫,每次路由跳转完成后。不会接受 next 函数，跳转完成已经进入到组件内了
- router.beforResolve() 全局解析守卫，在路由跳转前，所有组件内守卫和 异步路由组件 被解析之后触发，它同样在每次导航时都会触发。解析完成后导航被确定，准备开始跳转。
组件内路由守卫
- beforeRouteEnter() 路由进入组件之前调用，该钩子在beforeEach 和 beforeEnter 之后。
  此时还没有进入组件，组件实例还没有被创建。所以不能获取组件实例，此时 this 为 undefined，在 beforeCreate 生命周期前触发。
- beforeRouteUpdate() this 已经可用了，所以给 next 传递回调就没有必要了。对一个带有动态参数的路径 /foo/:id,在/foo/1 和/foo/2之间跳转的时候，由于会渲染统一的Foo组件，因此这个组件实例会被复用，这个钩子在这种情况下可以被调用。
- beforeRouteLeave()离开该组件时被调用,this 已经可用了，所以给 next 传递回调就没有必要了。
独享路由守卫
- beforeEnter() 需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在 params、query 或 hash 改变时触发。

进入组件前的调用的顺序 beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() 这个过程不可以使用this，因为组件实例还没有被创建，所以需要利用next函数

完整的导航解析流程
1.导航被触发。
2.在失活的组件里调用 beforeRouteLeave 守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

[Compilation et partage] Quelques questions dentretien liées à vue-router (avec analyse des réponses)

keep-alive

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

keep-alive标签主要是有include、exclude、max三个属性

include、exclude 前两个属性允许keep-alive有条件的进行缓存
max可以定义组件最大的缓存个数，如果超过了这个个数的话，在下一个新实例创建之前，就会将以缓存组件中最久没有被访问到的实例销毁掉。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

keep-alive的原理缓存管理+特殊的挂载/卸载流程

特殊的卸载/挂载流程:activated/deactivated
缓存管理:LRU(Least Recently Used)最近最少使用是一种淘汰算法

特殊的卸载/挂载流程
由于不能将组件真正的卸载，所以keep-alive是将组件从原容器移动到另外一个假容器中，实现假卸载。挂载的时候从隐藏容器中再搬运到原容器。对应到组件的activated和deactivated

Combien de fonctions de hook possède vue-router ? De quoi s’agit-il exactement et quel est le processus d’exécution ? 🎜

vue-router

Gardes de routage global : il peut y avoir plusieurs appels en fonction de l'ordre de création.
- router.beforeEach() Garde frontale globale, 🎜 se déclenchera à chaque fois que vous naviguerez🎜.
- router.afterEach() Garde globale post-routage, après chaque saut d'itinéraire terminé. 🎜n'acceptera pas la fonction suivante🎜, le saut est terminé et est entré dans le composant
- router.beforResolve() Garde d'analyse globale, avant que la route saute, tous les 🎜composants Les gardes 🎜 et les 🎜composants de routage asynchrone🎜 sont déclenchés après avoir été analysés, ce qui se déclenche également à chaque navigation. Une fois l'analyse terminée, la navigation est déterminée et prête à démarrer.
Route guard dans le composant
- beforeRouteEnter() est appelé avant que la route n'entre dans le composant. Ce hook se trouve dans <. code>beforeEach
beforeRouteUpdate() ceci est déjà disponible, 🎜 il n'est donc pas nécessaire de passer un rappel au suivant 🎜. Pour un chemin /foo/:id avec des paramètres dynamiques, lors du saut entre /foo/1 et /foo/2, le composant Foo unifié sera rendu, donc cette instance de composant sera réutilisée. Ce hook peut être appelé dans ce cas.
beforeRouteLeave() est appelé en quittant le composant, ceci est déjà disponible, 🎜 il n'est donc pas nécessaire de passer le rappel au suivant 🎜.

Garde de route exclusive
- beforeEnter() Vous devez définir la garde beforeEnter sur la 🎜configuration de routage 🎜Cette garde. uniquement déclenché lors de la saisie de la route 🎜, exécuté immédiatement après beforeEach, et ne sera pas déclenché lorsque les paramètres, la requête ou le hachage changent.

beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() Ce processus ne peut pas l'utiliser car l'instance du composant n'a pas encore été créée, vous devez donc utiliser la fonction suivante🎜🎜🎜Processus d'analyse de navigation complet🎜🎜 1. La navigation est déclenchée. 🎜 2. Appelez la garde beforeRouteLeave dans le composant désactivé. 🎜 3. Appelez le garde global beforeEach. 🎜 4. Appelez la garde beforeRouteUpdate dans le composant réutilisé. 🎜 5. Appelez beforeEnter dans la configuration du routage. 🎜 6. Analysez les composants de routage asynchrone. 🎜 7. Appelez beforeRouteEnter dans le composant activé. 🎜 8. Appelez le garde global beforeResolve. 🎜 9. La navigation est confirmée. 🎜 10. Appelez le hook global afterEach. 🎜 11. Déclenchez la mise à jour du DOM. 🎜 12. Appelez la garde beforeRouteEnter pour transmettre 🎜 à la fonction de rappel de next. L'instance de composant créée sera transmise en tant que paramètre de la fonction de rappel 🎜. 🎜🎜🎜🎜🎜🎜keep-alive🎜🎜🎜keep-alive peut implémenter la mise en cache des composants, et le composant actuel ne sera pas déchargé lorsque le composant est commuté. 🎜🎜La balise keep-alive a principalement trois attributs : include,exclude et max 🎜

include, exclude Le deux premiers Cet attribut permet à keep-alive de mettre en cache conditionnellement

max et peut définir le nombre maximum de composants mis en cache si ce nombre est dépassé, avant le. la prochaine fois qu'une nouvelle instance est créée, l'instance du composant de cache à laquelle on n'a pas accédé depuis le plus longtemps sera détruite. 
🎜Deux cycles de vie activé/désactivé, permettent de savoir si le composant courant est actif. 🎜🎜Gestion du cache principe keep-alive + processus spécial montage/démontage
🎜Processus spécial désinstallation/montage : activé/désactivé🎜 Gestion du cache : 🎜LRU (Least Récemment Utilisé) est un algorithme d'élimination 🎜🎜🎜🎜Processus spécial de désinstallation/montage🎜🎜 Étant donné que le composant ne peut pas être véritablement désinstallé, le maintien en vie consiste à supprimer le composant de son état d'origine. Le conteneur est déplacé vers un autre faux. conteneur pour réaliser une fausse désinstallation. Lors du montage, il est déplacé du conteneur caché vers le conteneur d'origine. Correspondant aux cycles de vie activés et désactivés des composants🎜 keepAlive marquera les composants internes (qui doivent être mis en cache)🎜
Ajoutez l'attribut ShouldKeepAlive sur l'objet vnode du composant interne pour indiquer au moteur de rendu que lorsque le composant est déchargé, le composant doit être mis en cache et non réellement déchargé.
Ajoutez l'attribut keepAlive sur l'objet vnode du composant interne . Si le composant a été mis en cache, ajoutez une marque indiquant que le moteur de rendu ne sera pas remonté et pourra être activé directement. 


Stratégie de mise en cache : la moins récemment utilisée

Utilisez le cache d'objets Map pour mettre en cache les composants, la clé est la valeur vnode.type et la valeur est le vnode object, car il y a une référence à l'instance du composant dans l'objet vnode du composant (<code>vnode.component)vnode.type值，value为vnode对象，因为组件的vnode对象中存在对组件实例的引用(vnode.component)