In diesem Artikel werden Ihnen 10 Vuejs-Interviewfragen zum Routing von Vue-Routern vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Routing von Vue-Router-Interviewfragen
1 Was ist das MVVM-Framework?
mvvm ist Model-View-ViewModel. Das Designprinzip von mvvm basiert auf mvc.
MVVM ist die Abkürzung für Model-View-Model und ist für die Geschäftslogik und Datenkapselung verantwortlich stellt die UI-Komponente dar und ist für die Schnittstelle und Anzeige verantwortlich. ViewModel überwacht Änderungen in Modelldaten, steuert das Ansichtsverhalten und verarbeitet Benutzerinteraktionen. Einfach ausgedrückt verbindet es die Ansichtsebene und die Modellebene durch bidirektionale Datenbindung. Unter der MVVM-Architektur sind Ansicht und Modell nicht direkt miteinander verbunden, sondern interagieren über ViewModel. Wir konzentrieren uns nur auf die Geschäftslogik und müssen das DOM nicht manuell bedienen, noch müssen wir auf die Synchronisierung von Ansicht und Modell achten. (Lernvideo-Sharing: Vue-Video-Tutorial)
2 Was ist Vue-Router? Was sind die Komponenten?
- Vue Router ist der offizielle Routing-Manager für Vue.js. Es ist tief in den Kern von Vue.js integriert und erleichtert so die Erstellung von Single-Page-Anwendungen.
-
<router-link>和<router-view>和<keep-alive>
3. Aktive Klasse ist ein Attribut welcher Komponente?
active-class ist das Router-Link-Terminalattribut, das zum Wechseln des ausgewählten Stils verwendet wird. Dieser Stil wird angewendet, wenn auf das Router-Link-Label geklickt wird.
4 Wie definiere ich das dynamische Routing von Vue-Router? Wie erhalte ich den übergebenen Wert?
- Bei der Erstellung dynamischer Routen werden hauptsächlich die dynamischen Pfadparameter während der Verwendung des Pfadattributs verwendet, beginnend mit einem Doppelpunkt, wie folgt:
{
path: '/details/:id'
name: 'Details'
components: Details
}Nach dem Login kopieren
Greifen Sie auf alle Dateien im Detailverzeichnis zu, wenn Details/a, Details/ b usw. werden der Detailkomponente zugeordnet.
- Beim Abgleichen der Route unter /details wird der Parameterwert auf this.$route.params gesetzt, sodass dynamische Parameter über dieses Attribut abgerufen werden können
console.log(this.$route.params.id)
Nach dem Login kopieren
5 Welche Arten der Navigation bietet der Vue-Router? ? Haken?
const router = new VueRouter({})
router.beforeEach((to, from, next) = {
// to do somethings
})Nach dem Login kopieren
to:Route, stellt das einzugebende Ziel dar, es ist ein Routing-Objekt.
von:Route stellt die Route dar, die gerade abfährt, und ist auch ein Routing-Objekt
next:Funktion, eine Methode, die aufgerufen werden muss, und der spezifische Ausführungseffekt hängt von den Parametern der nächsten Methode ab call
- next( ): Geben Sie den nächsten Hook in die Pipeline ein. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt
- next(false): Die aktuelle Navigation des Terminals. Wenn sich die Browser-URL ändert, wird die URL an die Adresse angepasst, die der Von-Route entspricht.
- next(’/’)||next({path:’/’}): Zu einer anderen Adresse springen. Aktuelles Navigationsterminal, neue Navigation durchführen.
* Die nächste Methode muss aufgerufen werden, sonst kann die Hook-Funktion nicht aufgelöst werden
router.afterEach((to, from) = {
// to do somethings
})Nach dem Login kopieren
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home，
beforeEnter: (to, from, next) = {
// to do somethings
// 参数与全局守卫参数一样
}
}
]
})Nach dem Login kopieren
- In-component Navigation Hook
const Home = {
template: `<div</div`,
beforeRouteEnter(to, from, next){
// 在渲染该组件的对应路由被 confirm 前调用
// 不能获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next){
// 在当前路由改变，但是该组件被复用时调用
// 例：对于一个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时候
// 由于会渲染同样的 Home 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 'this'
},
beforeRouteLeave(to, from, next){
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 'this'
}
}Nach dem Login kopieren
- beforeRouterEnter kann darauf nicht zugreifen, da der Guard aufgerufen wird, bevor die Navigation bestätigt wird, die neue Komponente also nicht bereits erstellt wurde, kann auf die Komponenteninstanz zugegriffen werden, indem ein Callback an next übergeben wird. Führen Sie den Rückruf aus, wenn die Navigation bestätigt wird, und verwenden Sie die Instanz als Methodenparameter des Rückrufs.
const Home = {
template: `<div</div`,
beforeRouteEnter(to, from, next){
next( vm = {
// 通过 'vm' 访问组件实例
})
}
}Nach dem Login kopieren
6. Was ist der Unterschied zwischen $route und $router?
- router ist eine Instanz von VueRouter. Es handelt sich um ein globales Routing-Objekt, das Routensprungmethoden, Hook-Funktionen usw. enthält.
- route ist ein Routing-Informationsobjekt||Jumping-Routing-Objekt. Jede Route verfügt über ein Routenobjekt, das ein lokales Objekt ist und Routing-Informationsparameter wie Pfad, Parameter, Hash, Abfrage, vollständiger Pfad, Übereinstimmung, Name usw. enthält.
7. Vue-Router reagiert auf Änderungen in Routing-Parametern
- Verwenden Sie die Überwachung, um die komponenteninterne Navigations-Hook-Funktion zu erkennen
Parameter
- Nur Name kann verwendet werden, Pfad kann nicht verwendet werden
Parameter werden nicht auf dem Pfad angezeigt
Der Browser-Force-Refresh-Parameter wird gelöscht,
