[Zusammenstellung und Weitergabe] Einige Interviewfragen zum Vue-Router (mit Antwortanalyse)

In diesem Artikel werden einige Interviewfragen zum Thema Vue-Router zusammengefasst und geteilt (mit Antwortanalyse), um Ihnen dabei zu helfen, das Grundwissen zu sortieren und Ihren Wissensvorrat zum Vue-Router zu erweitern. Es lohnt sich, einen Blick darauf zu werfen!

Das Prinzip des Vue-Routers

In einer Single-Page-Anwendung muss der Wechsel zwischen verschiedenen Komponenten durch Front-End-Routing implementiert werden.

Front-End-Routing

1. Schlüssel ist der Pfad, Wert ist die Komponente, die zum Anzeigen des Seiteninhalts verwendet wird
2. Arbeitsprozess: Wenn sich der Pfad des Browsers ändert, wird die entsprechende Komponente angezeigt.
vue-routers Routing-Funktion: 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 Front-End-Entwicklung 】

-	描述	如何指定跳转的路由	如果没有传参	可以传参没有要求的值吗
params参数	路径/params参数	必须要使用name指定路由	params是路由的一部分,如果在配置了占位符必须要有 如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。	传递路径上没有的占位符，地址栏上不会显示并且刷新会丢失
query参数	路径? key1=val1 & key2=val2....Komponenten Routen zuordnen und sie dann rendern	hauptsächlich	Wie um die URL zu ändern, ohne dass die Seite aktualisiert wird	So erkennen Sie die URL-Änderung [Verwandte Empfehlungen: vuejs-Video-Tutorial

🎜Der Hash-Modus des Routings🎜

• 🎜hash ist der Teil zwischen # und dem Folgenden in der URL. Die URL nach # wird nicht an den Server gesendet, 🎜also ändern Der Hash-Teil in der URL führt nicht dazu, dass die Seite aktualisiert wird. 🎜🎜
• 🎜window kann onhashchange-Ereignisänderungen überwachen. Wenn sich der Hash ändert, lesen Sie den Inhalt nach #, passen Sie die Routing-Regeln basierend auf den Informationen an und ändern Sie die Seitenweiterleitung, indem Sie window.location.hash ändern. 🎜

🎜🎜Drei Möglichkeiten, die URL zu ändern🎜🎜

• Ändern Sie die URL über den Browser vorwärts und rückwärts
• Ändern Sie die URL über Tags
• Ändern der URL über window.location

🎜🎜Vorteile🎜🎜

• Nur das Front-End muss die Routing-Tabelle konfigurieren, es ist keine Beteiligung des Backends erforderlich li>
• Gute Kompatibilität, Browser kann unterstützt werden
• 🎜Hash-Wertänderungen senden keine Anfrage an das Backend, es handelt sich um ein vollständiges Front-End-Routing🎜

🎜🎜 Nachteile🎜🎜

• Der Hash-Wert ist vorne erforderlich. Das Hinzufügen von # entspricht nicht der URL-Spezifikation und ist nicht schön

🎜 🎜Der Verlaufsmodus des Routings – unter Verwendung der Verlaufs-API von H5🎜

• Der neue pushState() und replaceState()-Methoden in der History-Schnittstelle von 🎜html5 werden verwendet, um Datensätze im Browserverlauf hinzuzufügen und zu ändern, den Seitenpfad zu ändern, 🎜die URL zu springen, ohne die Seite neu zu laden🎜. 🎜
• 🎜Das popstate-Ereignis ähnelt dem hashchange-Ereignis, aber das popstate-Ereignis ist etwas anders: 🎜 wird erst aufgerufen, nachdem 🎜 ausgeführt wurde das Verhalten des Browsers🎜 popState wird ausgelöst, wenn der Benutzer auf die Schaltflächen „Zurück“ und „Weiter“ des Browsers klickt oder die Methoden History.back(), History.forward() und History.go() mithilfe von JavaScript aufruft. 🎜

🎜🎜Vorteile🎜🎜

• 🎜Befolgen Sie die URL-Adressspezifikationen, es ist kein # erforderlich und die Verwendung ist schöner🎜

🎜🎜 Nachteile🎜🎜

• Wenn der Benutzer die Adresse manuell eingibt oder die Seite aktualisiert, wird eine URL-Anfrage initiiert. Das Backend muss die Seite index.html so konfigurieren, dass der Benutzer nicht mit der statischen Ressource übereinstimmen kann, andernfalls a Es tritt ein Fehler 404 auf.
• Kompatibel. Die Leistung ist relativ schlecht. Es werden die neuen Methoden pushState() und replaceState() im HTML5-Verlaufsobjekt verwendet. was die Unterstützung bestimmter Browser erfordert.
ul>🎜🎜🎜Was ist der Unterschied zwischen $route und $router? 🎜🎜🎜$router ist ein Instanzobjekt von VueRouter und stellt das einzige Routerobjekt für die gesamte Anwendung dar. Enthält Routing-Jump-Methoden, Hook-Funktionen usw. 🎜 $route ist das aktuelle Routing-Objekt, das die Routing-Regeln dieser Komponente darstellt. Jede Route verfügt über ein Routenobjekt, das ein lokales Objekt ist. 🎜🎜🎜🎜Vue-Router-Parameter werden auf verschiedene Arten übergeben, was sind die Unterschiede?🎜🎜🎜🎜params Parameter🎜🎜Path/params Parameter🎜🎜Sie müssen name verwenden, um die Route anzugeben🎜🎜params ist Teil der Route. Wenn der Platzhalter konfiguriert ist, muss er enthalten sein. Wenn diese Route params-Parameter hat, dieser Parameter jedoch während des Sprungs nicht übergeben wird, schlägt der Sprung fehl oder die Seite hat keinen Inhalt. 🎜🎜🎜Platzhalter, die sich nicht im Zustellungspfad befinden, werden nicht in der Adressleiste angezeigt und gehen nach der Aktualisierung verloren🎜🎜🎜🎜Abfrageparameter🎜🎜Pfad? key1=val1 & key2=val2.. ..🎜🎜1. Sie können den Namen verwenden, um die Route anzugeben. 🎜🎜Abfrage ist ein Parameter, der nach der URL gespleißt wird. Es spielt keine Rolle, ob Sie die Route angeben Ich habe es nicht🎜🎜Abfrage wird nicht🎜🎜🎜🎜<h3> <a id="vuerouter_65"></a><strong>Vue-Router-Parameterverlustproblem</strong> </h3> <p>Wenn der Parameter params übergeben wird, werden die vom Einstellungsplatzhalter empfangenen Parameter übergeben, die Adressleiste wird nicht angezeigt und die Aktualisierung geht verloren. </p> <p>Lösung: Sie können die Parameter über <code>this.$route.params abrufen und lokal speichernthis.$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 的回调函数，创建好的组件实例会作为回调函数的参数传入。



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


Wie viele Hook-Funktionen hat Vue-Router? ? Was genau ist das und wie läuft der Ausführungsprozess ab? 🎜

🎜vue-router Die bereitgestellten Navigationswächter werden hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet. 🎜
• Globale Routing-Guards: Je nach Erstellungsreihenfolge kann es mehrere Aufrufe geben.
  • router.beforeEach() Globaler Frontschutz, 🎜 wird bei jeder Navigation ausgelöst🎜.
  • router.afterEach() Globaler Post-Routing-Schutz, nachdem jeder Routensprung abgeschlossen ist. 🎜Akzeptiert die nächste Funktion nicht🎜, der Sprung ist abgeschlossen und hat die Komponente betreten
  • router.beforResolve() Globaler Analyseschutz, bevor die Route springt, alle 🎜Komponenten Guards 🎜 und 🎜Async-Routing-Komponenten🎜 werden nach dem Parsen ausgelöst, was auch bei jeder Navigation ausgelöst wird. Nachdem die Analyse abgeschlossen ist, ist die Navigation bestimmt und bereit zum Springen.
• Route Guard innerhalb der Komponente
  • beforeRouteEnter() wird aufgerufen, bevor die Route in die Komponente eintritt code>beforeEach
  code> und nach beforeEnter. 🎜 Sie haben die Komponente noch nicht eingegeben und die Komponenteninstanz wurde noch nicht erstellt. Daher kann die Komponenteninstanz zu diesem Zeitpunkt nicht abgerufen werden. Dies ist undefiniert und wird vor dem beforeCreate-Lebenszyklus ausgelöst.
• beforeRouteUpdate() Dies ist bereits verfügbar, 🎜 es besteht also keine Notwendigkeit, einen Rückruf an next zu übergeben 🎜. Für einen Pfad /foo/:id mit dynamischen Parametern wird beim Springen zwischen /foo/1 und /foo/2 die einheitliche Foo-Komponente gerendert, sodass diese Komponenteninstanz wiederverwendet wird. Dieser Hook kann in diesem Fall aufgerufen werden.
• beforeRouteLeave() wird beim Verlassen der Komponente aufgerufen, dies ist bereits verfügbar, 🎜 es besteht also keine Notwendigkeit, den Rückruf an next zu übergeben 🎜.
• Exklusiver Routenschutz
  • beforeEnter() Sie müssen den beforeEnter-Schutz in der 🎜Routing-Konfiguration definieren Wird nur bei Eingabe der Route 🎜 ausgelöst, unmittelbar nach beforeEach ausgeführt und wird nicht ausgelöst, wenn sich Parameter, Abfrage oder Hash ändern.
🎜Die Reihenfolge der Aufrufe vor dem Betreten der Komponente beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() Dieser Prozess kann dies nicht verwenden, da die Komponenteninstanz noch nicht erstellt wurde. Sie müssen daher die nächste Funktion verwenden🎜🎜🎜Navigationsanalyseprozess abschließen🎜🎜 1. Die Navigation wird ausgelöst. 🎜 2. Rufen Sie den Guard beforeRouteLeave in der deaktivierten Komponente auf. 🎜 3. Rufen Sie den globalen Guard beforeEach auf. 🎜 4. Rufen Sie den Guard beforeRouteUpdate in der wiederverwendeten Komponente auf. 🎜 5. Rufen Sie beforeEnter in der Routing-Konfiguration auf. 🎜 6. Analysieren Sie asynchrone Routing-Komponenten. 🎜 7. Rufen Sie beforeRouteEnter in der aktivierten Komponente auf. 🎜 8. Rufen Sie den globalen beforeResolve-Guard auf. 🎜 9. Die Navigation wird bestätigt. 🎜 10. Rufen Sie den globalen AfterEach-Hook auf. 🎜 11. DOM-Update auslösen. 🎜 12. Rufen Sie den beforeRouteEnter-Guard auf, um 🎜 an die Callback-Funktion von next zu übergeben. Die erstellte Komponenteninstanz wird als Parameter der Callback-Funktion 🎜 übergeben. 🎜🎜🎜🎜🎜🎜keep-alive🎜🎜🎜keep-alive kann Komponenten-Caching implementieren und die aktuelle Komponente wird nicht entladen, wenn die Komponente gewechselt wird. 🎜🎜Das keep-alive-Tag hat hauptsächlich drei Attribute: einschließen, ausschließen und max. 🎜
• include, exclude Das Die ersten beiden ermöglichen es keep-alive, bedingt zwischenzuspeichern.
• max kann die maximale Anzahl zwischengespeicherter Komponenten definieren Beim nächsten Erstellen einer neuen Instanz wird die Instanz in der Cache-Komponente zerstört, auf die am längsten nicht zugegriffen wurde.
🎜Zwei Lebenszyklen aktiviert/deaktiviert, die verwendet werden, um zu wissen, ob die aktuelle Komponente aktiv ist. 🎜

🎜Keep-Alive-Prinzip Cache-Verwaltung + spezieller Mount-/Unmount-Prozess

🎜Spezieller Deinstallations-/Mount-Prozess: aktiviert/deaktiviert🎜 Cache-Verwaltung: 🎜LRU (Least Recent Used) ist ein Eliminierungsalgorithmus 🎜🎜🎜🎜Spezieller Deinstallations-/Mount-Prozess🎜🎜 Da die Komponente nicht wirklich deinstalliert werden kann, besteht Keep-Alive darin, die Komponente aus ihrem ursprünglichen Zustand zu entfernen. Der Container wird in eine andere Fälschung verschoben Container, um eine gefälschte Deinstallation zu erreichen. Bei der Montage wird es vom versteckten Container in den Originalcontainer verschoben. Entsprechend den Lebenszyklen aktiviert und deaktiviert von Komponenten🎜 markiert keepAlive interne Komponenten (die zwischengespeichert werden müssen)🎜
• Fügen Sie das Attribut „shouldKeepAlive“ zum Vnode-Objekt der internen Komponente hinzu, um dem Renderer mitzuteilen, dass die Komponente beim Entladen der Komponente zwischengespeichert und nicht tatsächlich entladen werden muss.

• Fügen Sie das Attribut „keeperAlive“ zum Vnode-Objekt der internen Komponente hinzu Wenn die Komponente zwischengespeichert wurde, fügen Sie eine Markierung hinzu, die angibt, dass der Renderer nicht erneut bereitgestellt wird und direkt aktiviert werden kann.



Caching-Strategie: Zuletzt verwendet

Verwenden Sie den Map-Objekt-Cache, um Komponenten zwischenzuspeichern. Der Schlüssel ist der Wert vnode.type und der Wert ist der Wert vnode Objekt, da es einen Verweis auf die Komponenteninstanz im Vnode-Objekt der Komponente gibt (<code>vnode.component)vnode.type值，value为vnode对象，因为组件的vnode对象中存在对组件实例的引用(vnode.component)

• cache 前者用来存缓存组件的虚拟dom集合
• keys
cache Ersteres ist gewohnt Speichern Sie die virtuelle Dom-Sammlung der Cache-Komponente.
keys Letzterer wird zum Speichern der Schlüsselsammlung der Cache-Komponente verwendet.

• generiert den Cache-Schlüssel basierend auf der Komponenten-ID und dem Tag. und durchsucht das Cache-Objekt, um herauszufinden, ob die Komponenteninstanz zwischengespeichert wurde. Falls vorhanden, rufen Sie den zwischengespeicherten Wert direkt ab und aktualisieren Sie die Position des Schlüssels in Schlüsseln (die Aktualisierung der Position des Schlüssels ist der Schlüssel zur Implementierung der LRU-Ersetzungsstrategie).

• Wenn sie nicht vorhanden ist, speichern Sie die Komponenteninstanz im Kartenobjekt und speichern Sie den Schlüsselwert. Überprüfen Sie dann, ob die Anzahl der zwischengespeicherten Instanzen den maximalen Einstellungswert überschreitet, löschen Sie die letzte unbenutzte Instanz gemäß der LRU-Ersetzungsrichtlinie (d. h. der Schlüssel mit dem Index 0).

(Teilen von Lernvideos: Vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo

)🎜

-	Beschreibung	So geben Sie die Sprungroute an	Wenn keine Parameter übergeben werden	Sie können übergeben Parameter ohne Anforderungen Ist der Wert

Das obige ist der detaillierte Inhalt von[Zusammenstellung und Weitergabe] Einige Interviewfragen zum Vue-Router (mit Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!