Penjelasan terperinci tentang fungsi penghalaan dalam Vue3: aplikasi untuk melaksanakan lompatan penghalaan aplikasi SPA

Dengan pembangunan berterusan teknologi bahagian hadapan, Aplikasi Halaman Tunggal (SPA) telah menjadi arus perdana pembangunan bahagian hadapan, dan penghalaan merupakan bahagian penting dalam aplikasi SPA. Dalam Vue3, fungsi penghalaan telah dikemas kini dan dipertingkatkan, menjadikannya lebih mudah digunakan dan lebih berkuasa. Artikel ini akan memperkenalkan secara terperinci aplikasi fungsi penghalaan dalam Vue3 dan cara melaksanakan lompatan penghalaan dalam aplikasi SPA.

1. Fungsi penghalaan dalam Vue3

Lompatan laluan dalam Vue3 diselesaikan melalui fungsi penghalaan, yang dipanggil "Fungsi Navigasi Laluan" adalah seperti berikut:

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

router.push('/home')

Dengan memanggil fungsi router.push() untuk menentukan laluan yang hendak dilompat, lompatan penghalaan boleh dicapai. Antaranya, fungsi createRouter() digunakan untuk mencipta penghala, parameter sejarah menentukan mod penghalaan, dan parameter laluan mentakrifkan hubungan pemetaan antara laluan penghalaan dan komponen.

2. Laksanakan pengawal laluan

Dalam pembangunan sebenar, kadangkala kita perlu mengehadkan dan mengawal lompatan laluan. Pada masa ini, kita boleh menggunakan pengawal laluan (Route Guard) yang disediakan dalam Vue3. Pengawal laluan ialah fungsi yang dipanggil apabila laluan hendak melompat. Kita boleh menilai dan memproses dalam fungsi ini untuk mengawal penghalaan. Vue3 menyediakan fungsi pengawal laluan berikut:

2.1 beforeEach

Fungsi ini akan dipanggil sebelum setiap lompatan laluan bermakna terus melompat, dan mengembalikan palsu bermakna membatalkan. Kami boleh melakukan pengesahan log masuk, penghakiman kebenaran dan operasi lain dalam fungsi ini.

router.beforeEach((to, from, next) => {
  // to: 即将要跳转的路由
  // from: 当前页面正要离开的路由
  // next: 控制路由是否可以跳转的函数

  const loggedIn = localStorage.getItem('user')

  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login')
  } else {
    next()
  }
})

2.2 beforeRouteEnter

Fungsi ini hanya boleh digunakan di dalam komponen. Fungsi ini dipanggil apabila komponen belum dibuat lagi. Kita boleh mendapatkan contoh komponen dalam fungsi ini dan mengendalikannya selepas mendapatkannya.

export default {
  beforeRouteEnter(to, from, next) {
    axios.get('/user').then(response => {
      if (response.data.isAdmin) {
        next()
      } else {
        next('/403')
      }
    })
  }
}

2.3 beforeRouteUpdate

Fungsi ini dipanggil selepas laluan melompat tetapi komponen semasa masih digunakan semula. Kami boleh mengemas kini data komponen dalam fungsi ini.

export default {
  beforeRouteUpdate(to, from, next) {
    const id = to.params.id
    axios.get(`/user/${id}`).then(response => {
      this.user = response.data
      next()
    })
  }
}

3. Laksanakan penghalaan dinamik

Kadangkala kita perlu menjana laluan penghalaan secara dinamik apabila penghalaan melompat. Vue3 menyediakan fungsi "Laluan Dinamik". Penghalaan dinamik dilaksanakan dengan menambahkan ruang letak pada laluan penghalaan Ruang letak bermula dengan ":".

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

Dalam contoh di atas, kami mencapai penjanaan dinamik laluan penghalaan melalui pemegang tempat ":id". Apabila routing melompat, kita boleh mendapatkan nilai id dalam laluan melalui ke.params.id.

router.push({ path: `/user/${userId}` })

4. Laksanakan penghalaan bersarang

Untuk halaman yang kompleks, kadangkala kita perlu melaksanakan penghalaan bersarang. Vue3 juga menyediakan sokongan untuk penghalaan bersarang. Kami boleh melaksanakan penghalaan bersarang dengan mentakrifkan sub-laluan dalam laluan induk dan sub-laluan.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'list',
          component: List
        },
        {
          path: 'detail/:id',
          component: Detail
        }
      ]
    }
  ]
})

Dalam contoh di atas, kami menentukan dua sub-laluan, senarai dan perincian, dalam laluan rumah. Dalam komponen Senarai, kita boleh mendapatkan maklumat sub-laluan melalui atribut kanak-kanak bagi objek $route.

export default {
  created() {
    console.log(this.$route.children) // [ { path: 'list', ... }, { path: 'detail/:id', ... } ]
  }
}

5. Ringkasan

Dalam Vue3, fungsi penghalaan adalah salah satu kunci untuk melaksanakan aplikasi SPA. Melalui fungsi penghalaan, kita boleh melaksanakan lompatan penghalaan, pengawal penghalaan, penghalaan dinamik, penghalaan bersarang dan fungsi lain. Bagi pembangun, menguasai penggunaan fungsi penghalaan adalah langkah yang sangat penting, dan ia juga satu-satunya cara untuk meningkatkan keupayaan pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi penghalaan dalam Vue3: aplikasi untuk melaksanakan lompatan penghalaan aplikasi SPA. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!