Penjelasan terperinci tentang penggunaan vue-router dalam Vue

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini Ia bukan sahaja mudah dan mudah digunakan, tetapi juga mempunyai kebolehskalaan yang kuat Salah satu pemalam yang patut diberi perhatian ialah vue-router. vue-router ialah pemalam penghalaan rasmi untuk Vue Ia boleh mengawal navigasi penghalaan dengan lebih baik dalam aplikasi Vue, menjadikan perhubungan antara penghalaan dan komponen lebih jelas, dan meningkatkan pengalaman interaktif pengguna. Artikel ini akan menerangkan secara terperinci cara menggunakan Vue-router dan kegunaannya yang menarik.

1. Pemasangan dan penggunaan

Sebelum menggunakan vue-router, anda perlu memasangnya terlebih dahulu. Anda boleh menggunakan pengurus pakej npm untuk memasang pemalam vue-router. Arahan pemasangan adalah seperti berikut:

npm install vue-router

Selepas pemasangan selesai, perkenalkan dan gunakan vue-router dalam fail main.js:

import VueRouter from 'vue-router'
import routes from './router'

const router = new VueRouter({
      routes
})

new Vue({
      el: '#app',
      router,
      render: h => h(App)
})

Antaranya, parameter laluan menentukan konfigurasi penghalaan , yang boleh diubah suai mengikut keperluan projek. Kemudian masukkan parameter penghala dalam objek instantiasi Vue untuk mendayakan fungsi penghalaan.

2. Konfigurasi asas

Konfigurasi penghalaan termasuk jadual penghalaan dan komponen penghalaan. Jadual penghalaan digunakan terutamanya untuk mengkonfigurasi laluan penghalaan dan komponen yang sepadan. Komponen penghalaan ialah paparan komponen laluan penghalaan yang sepadan.

Buat fail router.js dalam direktori src untuk menentukan jadual dan komponen penghalaan. Seperti berikut:

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]

Kemudian perkenalkan konfigurasi penghalaan dalam main.js dan hantarkannya ke dalam contoh VueRouter. Antaranya, laluan penghalaan dikonfigurasikan menggunakan atribut laluan, dan atribut komponen menentukan komponen penghalaan yang sepadan.

3. Parameter passing

Vue-router juga menyokong lulus parameter, dan parameter yang diluluskan boleh diperolehi melalui objek $route.

1. Parameter laluan laluan

Parameter laluan laluan bermaksud meletakkan parameter sebagai sebahagian daripada laluan penghalaan, contohnya:

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

Apabila pengguna mengakses /pengguna / Apabila 1, laluan akan melepasi 1 sebagai userId parameter kepada komponen Pengguna.

2. Melalui parameter pertanyaan

Melalui parameter pertanyaan bermaksud meletakkan parameter selepas laluan penghalaan dalam bentuk pasangan nilai kunci, dipisahkan dengan tanda soal?, kunci berturut-turut Nilai pasangan disambungkan dengan &, sebagai contoh:

{
  path: '/user',
  name: 'user',
  component: User
}

Apabila pengguna mengakses /user?id=1&name=john, laluan akan melepasi {id: 1, name: 'john'} sebagai parameter pertanyaan kepada Pengguna komponen.

4. Ubah hala dan penghalaan bersarang

1. Ubah hala

Ubah hala merujuk kepada apabila pengguna mengakses laluan tertentu dalam penyemak imbas, melompat ke laluan lain secara automatik . Kod berikut melaksanakan fungsi melompat laluan /about secara automatik ke laluan /home:

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    redirect: '/home'
  }
]

2. Perubahan bersarang

Perubahan bersarang merujuk kepada menggunakan anak dalam induk Komponen penghalaan komponen. Sebagai contoh, dalam halaman dengan struktur tetap di bahagian atas dan bawah, komponen "kandungan" perlu bersarang Struktur tiga lapisan kelihatan seperti ini:

header
 / 
L   R
    |
content
    |
footer

Laluan bersarang perlu digunakan di dalam. komponen induk ad685957f08b1d0d1c27d396f163b033 teg untuk menduduki tempat dan menentukan jadual penghalaan anak di dalam jadual penghalaan komponen induk. Contohnya:

const home = {
  template: `
    <div>
      <h2>Home</h2>
      <router-view></router-view>
    </div>
  `
}

const about = {
  template: '<div>About</div>'
}

const contact = {
  template: '<div>Contact</div>'
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      children: [
        {
          path: 'about',
          name: 'about',
          component: about
        },
        {
          path: 'contact',
          name: 'contact',
          component: contact
        }
      ]
    }
  ]
})

menggunakan teg 975b587bf85a482ea10b0a28848e78a4 dalam komponen rumah sebagai ruang letak untuk sub-komponen "about" dan "content". Dalam jadual penghalaan, jadual sub-laluan yang dikonfigurasikan oleh komponen induk "rumah" mengandungi dua laluan sub-laluan "tentang" dan "kandungan".

5. Pengawal laluan

1. Pengawal global

Pengawal global akan dicetuskan sebelum penukaran laluan, antaranya sebelumEach() ialah pengawal hadapan global, yang boleh Melaksanakan operasi seperti pengesahan kebenaran dan pengesahan log masuk.

router.beforeEach((to, from, next) => {
  // 验证用户是否登陆 
  if(to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('token');

    if(token === null || token === '') {
      next('/login');
    } else {
      next();
    }
  }
})

Pengawal pos global digunakan untuk mencetuskan selepas penukaran penghalaan dan digunakan untuk mengendalikan operasi seperti bar kemajuan pemuatan halaman.

2. Pengawal Eksklusif Laluan

Pengawal Eksklusif Laluan digunakan untuk melakukan pemprosesan khusus untuk laluan tertentu Cuma tambah definisi atribut beforeEnter dalam konfigurasi penghalaan.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: admin,
      beforeEnter: (to, from, next) => {
        // 验证是否为管理员账户
        let token = localStorage.getItem('token');
        if(token === 'admin') {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
})

3. Pelindung dalam komponen

Pelindung dalam komponen digunakan terutamanya untuk memproses komponen semasa. Termasuk: tiga fungsi pengawal: beforeRouteEnter, beforeRouteUpdate dan beforeRouteLeave.

Fungsi beforeRouteEnter dicetuskan sebelum komponen masuk. Contoh komponen tidak boleh diakses secara langsung dalam fungsi ini, tetapi tika komponen boleh dihantar melalui fungsi panggil balik seterusnya untuk pemprosesan.

export default {
  data () {
    return {
      user: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get(`/api/user/${to.params.id}`).then(response => {
      next(vm => vm.setUser(response.data.user))
    })
  },
  methods: {
    setUser (user) {
      this.user = user
    }
  }
}

fungsi sebelumRouteUpdate Memandangkan penghalaan melompat antara komponen tidak akan mencipta semula kejadian, anda perlu menggunakan fungsi beforeRouteUpdate untuk pemprosesan.

export default {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  },
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Fungsi beforeRouteLeave dicetuskan apabila komponen akan ditinggalkan, dan digunakan untuk mengendalikan operasi seperti data borang yang tidak disimpan.

export default {
  beforeRouteLeave (to, from, next) {
    // 如果表单已保存或者页面没有修改，直接离开该页面
    if (this.saved || window.confirm('尚未保存，确定要离开吗？')) {
      next()
    } else {
      next(false)
    }
  }
}

6. Ringkasan

Menggunakan pemalam vue-router boleh menyediakan keupayaan kawalan yang berkuasa untuk navigasi penghalaan dalam aplikasi Vue, dengan itu meningkatkan pengalaman interaktif pengguna. Artikel ini memperkenalkan konfigurasi asas, penghantaran parameter, pengalihan semula, penghalaan bersarang dan pengawal penghalaan vue-router, yang boleh membantu pembangun menggunakan pemalam vue-router dengan lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang penggunaan vue-router dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!