Eine kurze Analyse des dynamischen Routings und benannter Ansichten in Vue.js

Der Inhalt dieses Artikels handelt von einer kurzen Analyse des dynamischen Routings und der benannten Ansichten von Vue.js. Jetzt kann ich ihn mit Ihnen teilen.

Dynamisches Routing
Dynamisches Routing kann tatsächlich als Routing-Parameter bezeichnet werden.

const router = new VueRouter({
  routes: [    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

Ein Pfad in der obigen Form ist eine dynamische Route. Nach dem Doppelpunkt stehen mehrere Parameter. Jeder Parameter wird auf this.$route.params gesetzt.

Beachten Sie, dass /user/:id und /user/:name bei einer Parameteränderung die Komponente wiederverwendet wird, sodass der Komponentenlebenszyklus-Hook nicht erneut aufgerufen wird. Bei der Wiederverwendung von Komponenten können Sie überwachen, ob sich die Route ändert, indem Sie Änderungen im $route-Objekt überwachen.

Der Routing-Hook beforeRouterUpdate wird ebenfalls ausgeführt.

vue-router verwendet Path-to-Regexp als Pfad-Matching-Engine. Wenn der Pfad komplex ist, kann er erweiterte Matching-Muster lernen. Allerdings sollte der Pfad im Allgemeinen nicht zu komplex gestaltet werden. Wenn er zu komplex ist, sollten Sie überlegen, wie Sie ihn vereinfachen können.

Benannte Ansichten

Manchmal möchten Sie um mehrere Ansichten gleichzeitig anzuzeigen (Geschwisteransichten). Erstellen Sie beispielsweise ein Layout mit zwei Ansichten: Seitenleiste (Seitennavigation) und Hauptansicht (Hauptinhalt). Zu diesem Zeitpunkt ist es hilfreich, die Ansicht zu benennen. Anstelle einer einzigen Steckdose können Sie in Ihrer Benutzeroberfläche mehrere individuell benannte Ansichten haben. Wenn router-view keinen Namen festlegt, wird standardmäßig der Standardwert verwendet.

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="header"></router-view>

Eine Ansicht wird mit einer Komponente gerendert, sodass für dieselbe Route mehrere Ansichten mehrere Komponenten erfordern. Stellen Sie sicher, dass Sie die Komponentenkonfiguration korrekt verwenden (mit s): Dynamisches Routing und benannte Ansichten

routes: [
    {
      path: '/',
      components: {        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]

Benannte Ansichten in Vue

Vue-Router-Routing Eine kurze Einführung in die Grundlagen

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des dynamischen Routings und benannter Ansichten in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!