Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan sarang dan pemadanan penghalaan berbilang peringkat?
Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan sarang dan pemadanan laluan berbilang peringkat?
Vue Router ialah pengurus penghalaan rasmi Vue.js, yang boleh membantu kami melaksanakan fungsi penghalaan dalam aplikasi satu halaman (SPA). Dalam Penghala Vue, kita boleh mentakrifkan pelbagai peraturan penghalaan dengan mengkonfigurasi jadual penghalaan dan melaksanakan lompatan dan pemadanan laluan. Dalam artikel ini, kami akan menumpukan pada cara menggunakan Penghala Vue untuk melaksanakan sarang dan pemadanan laluan berbilang peringkat.
Mula-mula, kita perlu memasang Vue Router dalam projek. Anda boleh menggunakan perintah npm atau yarn untuk memasang Vue Router.
npm install vue-router
atau
yarn add vue-router
Dalam projek Vue, kita perlu mencipta instance routing dan mengaitkannya dengan instance root Vue. Sebelum membuat contoh penghalaan, kita perlu mencipta jadual penghalaan terlebih dahulu untuk menentukan pelbagai peraturan penghalaan. Jadual penghalaan ialah tatasusunan yang terdiri daripada objek konfigurasi penghalaan Setiap objek konfigurasi penghalaan mengandungi laluan penghalaan dan komponen yang sepadan.
Andaikan projek kami mempunyai struktur bersarang penghalaan berbilang peringkat berikut:
- Home - About - Contact - News - Detail
Kami boleh mentakrifkan peraturan penghalaan berikut dalam jadual penghalaan:
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/components/Home.vue' import About from '@/components/About.vue' import Contact from '@/components/Contact.vue' import News from '@/components/News.vue' import Detail from '@/components/Detail.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About, children: [ { path: 'contact', name: 'Contact', component: Contact } ] }, { path: '/news', name: 'News', component: News, children: [ { path: 'detail', name: 'Detail', component: Detail } ] } ] const router = new VueRouter({ mode: 'history', routes }) export default router
Dalam jadual penghalaan di atas, kami telah menentukan peraturan penghalaan berikut:
/
ialah Home.vue/
路径对应的组件是Home.vue/about
路径对应的组件是About.vue/about/contact
路径对应的组件是Contact.vue/news
路径对应的组件是News.vue/news/detail
路径对应的组件是Detail.vue在我们的Vue根实例中,我们需要将我们创建的路由实例与Vue的根实例关联起来,并将我们的路由组件渲染到Vue根实例中的975b587bf85a482ea10b0a28848e78a4
标签中。
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
在上述代码中,我们将我们创建的路由实例通过router选项注入到Vue根实例中,并通过$mount('#app')
方法将Vue根实例挂载到id为app
的DOM节点上。
b988a8fd72e5e0e42afffd18f951b277
和975b587bf85a482ea10b0a28848e78a4
组件在我们的Vue组件中,我们可以使用b988a8fd72e5e0e42afffd18f951b277
组件来实现路由之间的跳转,使用975b587bf85a482ea10b0a28848e78a4
组件来渲染对应的路由组件。
<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/about/contact">Contact</router-link> <router-link to="/news">News</router-link> <router-link to="/news/detail">Detail</router-link> <hr> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script>
在上述代码中,我们通过b988a8fd72e5e0e42afffd18f951b277
组件定义了多个路由跳转链接,分别跳转到对应的路径。在975b587bf85a482ea10b0a28848e78a4
标签中,我们通过Vue Router来动态渲染对应的路由组件。
使用以上步骤,我们就可以在Vue项目中实现多级路由的嵌套和匹配。当我们点击不同的路由链接时,页面将会渲染对应的路由组件,实现页面的动态切换和嵌套。
总结
本文介绍了如何使用Vue Router来实现多级路由的嵌套和匹配。通过创建路由表,并在Vue根实例中关联路由实例,我们可以在Vue项目中定义多级路由规则,并实现路由之间的跳转和匹配。同时,我们还介绍了在Vue组件中如何使用b988a8fd72e5e0e42afffd18f951b277
和975b587bf85a482ea10b0a28848e78a4
/about
ialah About.vue
/about/contact
Komponen yang sepadan dengan laluan ialah Contact.vue/news
Komponen yang sepadan dengan laluan ialah News.vue/news/detail
Komponen sepadan dengan laluan ialah Detail.vue🎜🎜 975b587bf85a482ea10b0a28848e78a4
. 🎜rrreee🎜Dalam kod di atas, kami menyuntik tika penghalaan yang kami buat ke dalam tika akar Vue melalui pilihan penghala, dan memasang tika akar Vue melalui kaedah $mount('#app')
On nod DOM yang idnya ialah app
. 🎜b988a8fd72e5e0e42afffd18f951b277
dan 975b587bf85a482ea10b0a28848e78a4
🎜🎜🎜Dalam komponen Vue kami, kami Anda boleh menggunakan komponen b988a8fd72e5e0e42afffd18f951b277
untuk melaksanakan lompatan antara laluan dan menggunakan komponen 975b587bf85a482ea10b0a28848e78a4
untuk memaparkan komponen penghalaan yang sepadan. 🎜rrreee🎜Dalam kod di atas, kami menentukan berbilang pautan lompat penghalaan melalui komponen b988a8fd72e5e0e42afffd18f951b277
untuk melompat ke laluan yang sepadan masing-masing. Dalam teg 975b587bf85a482ea10b0a28848e78a4
, kami menggunakan Vue Router untuk memaparkan komponen penghalaan yang sepadan secara dinamik. 🎜🎜Menggunakan langkah di atas, kami boleh melaksanakan sarang dan pemadanan penghalaan berbilang peringkat dalam projek Vue. Apabila kami mengklik pada pautan penghalaan yang berbeza, halaman akan memaparkan komponen penghalaan yang sepadan untuk mencapai penukaran dinamik dan sarang halaman. 🎜🎜Ringkasan🎜🎜Artikel ini memperkenalkan cara menggunakan Penghala Vue untuk melaksanakan sarang dan pemadanan penghalaan berbilang peringkat. Dengan mencipta jadual penghalaan dan mengaitkan tika penghalaan dalam tika akar Vue, kita boleh menentukan peraturan penghalaan berbilang peringkat dalam projek Vue dan melaksanakan lompatan dan pemadanan antara laluan. Pada masa yang sama, kami juga memperkenalkan cara menggunakan komponen b988a8fd72e5e0e42afffd18f951b277
dan 975b587bf85a482ea10b0a28848e78a4
dalam komponen Vue untuk melaksanakan pemaparan pautan penghalaan dan komponen penghalaan. Saya harap artikel ini akan membantu anda apabila menggunakan Penghala Vue untuk melaksanakan sarang dan pemadanan penghalaan berbilang peringkat. 🎜🎜Rujukan🎜🎜🎜Dokumentasi rasmi Penghala Vue: https://router.vuejs.org/🎜🎜Atas ialah kandungan terperinci Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan sarang dan pemadanan penghalaan berbilang peringkat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!