10 vuejs-Interviewfragen zum Routing vue-router (einschließlich Antwortanalyse)

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.
• b988a8fd72e5e0e42afffd18f951b277和975b587bf85a482ea10b0a28848e78a4和7c9485ff8c3cba5ae9343ed63c2dc3f7

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
}

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)

5 Welche Arten der Navigation bietet der Vue-Router? ? Haken?

• Globaler Frontschutz

const router = new VueRouter({})
router.beforeEach((to, from, next) = {
  // to do somethings
})

• 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

• Globaler Post-Hook

router.afterEach((to, from) = {
 // to do somethings
})

• Der Post-Hook hat keine Next-Funktion und wird es auch nicht tun Ändern Sie die Navigation selbst.

• Route Exclusive Hook

  • beforEnter

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home，
      beforeEnter: (to, from, next) = {
        // to do somethings
        // 参数与全局守卫参数一样
    	}
    }
  ]
})

• 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 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 &#39;this&#39;
  },
  beforeRouteLeave(to, from, next){
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 &#39;this&#39;
  }
}

• 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 = {
      // 通过 &#39;vm&#39; 访问组件实例
    })
  }
}

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,

• // 监听当前路由发生变化的时候执行
  watch: {
    $route(to, from){
      console.log(to.path)
      // 对路由变化做出响应
    }
  }

  • Query:
  • Parameter wird gelöscht Auf dem Pfad wird die Aktualisierung nicht angezeigt. Es wird gelöscht. Der Name und der Pfad können verwendet werden onhashchage-Ereignis, das auf dem Fensterobjekt überwacht werden kann
    • 利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
    • 需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404，

  10. vue-router实现路由懒加载（动态加载路由）

  • 把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

  const router = new VueRouter({
    routes: [
      {
        path: '/home',
        name: 'Home'，
        component:() = import('../views/home')
  		}
    ]
  })

  以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~

  更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt von10 vuejs-Interviewfragen zum Routing vue-router (einschließlich Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!