So verwenden Sie Routing in Vue

Vues Routing-Funktion ermöglicht die Verwaltung der Seitennavigation in Ihrem SPA und die Zuordnung von URL-Pfaden zu Anwendungskomponenten. Die Verwendungsschritte sind wie folgt: Installieren Sie die Vue-Routing-Bibliothek. Erstellen Sie eine Router-Instanz. Installieren Sie den Router in der Vue-Instanz. Verwenden Sie <router-link>, um einen Routenlink zu definieren. Verwenden Sie <router-view>, um Routing-Komponenten anzuzeigen.

Routing in Vue verwenden

Einführung in den Vue-Routing-Mechanismus

Routing in Vue.js ist eine integrierte Funktion zum Verwalten der Seitennavigation in einer Single Page Application (SPA). Es ermöglicht Entwicklern, verschiedene URL-Pfade zu erstellen und zu verwalten, die verschiedenen Komponenten oder Ansichten der Anwendung entsprechen.

So verwenden Sie Vue-Routing

1. Installieren Sie die Vue-Routing-Bibliothek

<code class="bash">npm install vue-router@next</code>

2. Erstellen Sie eine Router-Instanz

Erstellen Sie eine neue Vue-Router-Instanz in Ihrer Vue.js-Anwendung.

<code class="javascript">import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})</code>

3. Installieren Sie die Router-Instanz in der Vue-Instanz.

Installieren Sie die Router-Instanz in der Vue.js-Instanz.

<code class="javascript">new Vue({
  router,
  el: '#app'
})</code>

4. Routing-Links definieren

Verwenden Sie das Tag <router-link> in der Komponente, um Routing-Links zu definieren. <router-link> 标签定义路由链接。

<code class="html"><router-link to="/about">关于我们</router-link></code>

5. 显示路由视图

在根组件中使用 <router-view> 标签显示当前激活的路由组件。

<code class="html"><router-view></router-view></code>

高级用法

动态路由

使用冒号 (:) 定义动态路由段，然后在组件中使用 $route.params

<code class="javascript">const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})</code>

5. Routing-Ansicht anzeigen

Verwenden Sie das Tag <router-view> in der Stammkomponente, um die aktuell aktivierte Routing-Komponente anzuzeigen.

<code class="javascript">const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      children: [
        { path: 'users', component: Users },
        { path: 'products', component: Products }
      ]
    }
  ]
})</code>

Erweiterte Verwendung

Dynamisches Routing

🎜🎜Verwenden Sie einen Doppelpunkt (:), um dynamische Routensegmente zu definieren, und verwenden Sie dann $route.params, um in der Komponente darauf zuzugreifen. 🎜

<code class="javascript">router.beforeEach((to, from, next) => {
  // ...
})</code>

🎜🎜Verschachtelte Routen🎜🎜🎜 Verschachteln Sie untergeordnete Routen innerhalb übergeordneter Routen, um eine komplexere hierarchische Navigation zu erstellen. 🎜rrreee🎜🎜Route Guards🎜🎜🎜Verwenden Sie Route Guards, um bestimmte Aktionen vor oder nach einer Navigation durchzuführen. 🎜rrreee

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Routing in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!