Cara menggunakan penghalaan dalam vue

Fungsi penghalaan Vue membolehkan mengurus navigasi halaman dalam SPA anda, memetakan laluan URL ke komponen aplikasi. Langkah-langkah penggunaan adalah seperti berikut: Pasang pustaka penghalaan Vue. Buat contoh penghala. Pasang penghala ke contoh Vue. Gunakan <router-link> untuk menentukan pautan laluan. Gunakan <router-view> untuk memaparkan komponen penghalaan.

Menggunakan penghalaan dalam Vue

Pengenalan kepada mekanisme penghalaan Vue

Penghalaan dalam Vue.js ialah aplikasi terbina dalam (Aplikasi Halaman Tunggal untuk mengurus navigasi halaman). Ia membolehkan pembangun mencipta dan mengurus laluan URL berbeza yang sepadan dengan komponen atau paparan aplikasi yang berbeza.

Cara menggunakan penghalaan Vue

1. Pasang perpustakaan penghalaan Vue

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

2. Buat instance penghala

Buat instance Vue Router anda.

<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 Pasang instance penghala ke dalam instance Vue

Pasang instance router ke dalam instance Vue.js.

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

4. Tentukan pautan penghalaan

Gunakan tag <router-link> dalam komponen untuk menentukan pautan penghalaan. <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. Paparkan paparan penghalaan

Gunakan tag <router-view> dalam komponen akar untuk memaparkan komponen penghalaan yang sedang diaktifkan.

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

Penggunaan Terperinci

Penghalaan Dinamik

🎜🎜Gunakan titik bertindih (:) untuk mentakrifkan segmen laluan dinamik dan kemudian gunakan $route.params untuk mengaksesnya dalam komponen. 🎜

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

🎜🎜Laluan Bersarang🎜🎜🎜 Sarang laluan anak dalam laluan induk untuk mencipta navigasi hierarki yang lebih kompleks. 🎜rrreee🎜🎜Pengawal Laluan🎜🎜🎜Gunakan pengawal laluan untuk melakukan tindakan tertentu sebelum atau selepas navigasi berlaku. 🎜rreeee

Atas ialah kandungan terperinci Cara menggunakan penghalaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!