Selesai: bagaimana menghantar ke halaman lain melalui penghala dalam vuejs

Laman Utama » JavaScript » Vue.js » Selesai: cara menghantar ke halaman lain melalui penghala dalam vuejs

Vue.js ialah antara rangka kerja JavaScript progresif yang paling popular digunakan dalam membina antara muka pengguna. Ia digunakan terutamanya untuk membuat aplikasi satu halaman. Salah satu ciri tersendiri yang disediakan oleh Vue.js ialah perpustakaan Penghala Vue yang membolehkan pembangunan aplikasi web yang sangat interaktif. Dalam artikel ini, kami akan menyelam lebih mendalam tentang cara Penghala Vue berfungsi.

Dalam dunia pembangunan web, penghalaan memainkan peranan penting dalam mengarahkan pengguna dari satu halaman ke halaman yang lain, mengekalkan keadaan aplikasi semasa pengguna menavigasi, memuatkan halaman yang malas untuk peningkatan prestasi dan banyak lagi. Penghala Vue cemerlang dalam tugas-tugas ini, menjadikannya mudah bagi pembangun untuk mencipta aplikasi yang lebih dinamik dan kompleks.

Asas Penghala Vue

Vue Router pada asasnya merupakan plugin Vue.js yang boleh anda sertakan dalam aplikasi Vue.js anda. Ia membolehkan anda memetakan URL yang berbeza kepada komponen yang berbeza, sama seperti cara URL dipetakan kepada halaman yang berbeza dalam aplikasi rendering bahagian pelayan tradisional.

//A simple route configuration
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// Create the router instance and pass the `routes` option
const router = new VueRouter({
 routes // short for `routes: routes`
})

// Create and mount the root instance.
const app = new Vue({
  router
}).$mount('#app')

Dalam contoh di atas, kami menyediakan dua laluan. Apabila URL ialah '/foo', komponen Foo dipaparkan dan apabila ia '/bar', komponen Bar dipaparkan.

Menavigasi ke Halaman Berbeza

Penghala Vue menyediakan `` komponen yang membolehkan navigasi dari satu halaman ke halaman yang lain. Komponen ini pada asasnya menjadikan `` tag.

// Using `router-link` component for navigation 
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

// Navigating programmatically
router.push('/foo')