Vue Router ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js. Ia boleh membantu kami melaksanakan fungsi navigasi dan penghalaan halaman dalam aplikasi Vue. Apabila menggunakan Penghala Vue, kita boleh memilih mod penghalaan yang berbeza mengikut keperluan sebenar.
Vue Router menyediakan 3 mod penghalaan, iaitu mod hash
模式、history
模式和abstract
模式。下面将详细介绍这3种路由模式的特点以及如何选择合适的路由模式。
hash
模式下,URL地址中会以#
符号作为分隔,URL的变化不会触发页面的重新加载,而是通过监听hashchange
事件来实现页面的切换。这种模式相对简单,不需要特殊的服务器配置,可以直接通过浏览器访问。例如,当我们访问http://www.example.com/#/home
时,实际上是在访问http://www.example.com
这个页面,然后通过Vue Router监听hashchange
事件,根据#/home
来切换到对应的组件。启用Hash模式的代码如下:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ mode: 'hash', // 设置路由模式为hash模式 routes: [ // ... ] }) export default router
history
模式下,URL地址是真实的URL,不再需要#
符号,通过调用浏览器的history.pushState
和history.replaceState
方法,可以在改变URL地址的同时不触发页面的重新加载。这种模式更加友好和美观,但需要服务器进行特殊的配置支持,以免在直接访问某个URL时出现404错误,因为真实的URL在服务器上是不存在的。启用History模式的代码如下:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ mode: 'history', // 设置路由模式为history模式 routes: [ // ... ] }) export default router
abstract
模式是一个不支持history
或hash
模式的浏览器环境下的路由模式。它主要用于在非浏览器环境下使用Vue Router,例如在Node.js环境或原生App中。这种模式下URL地址是虚拟的,通过浏览器的pushState
和replaceState
方法来改变URL地址,并且监听浏览器的popstate
事件来实现路由切换。启用Abstract模式的代码如下:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ mode: 'abstract', // 设置路由模式为abstract模式 routes: [ // ... ] }) export default router
根据实际需求选择路由模式,如果只是一个简单的单页面应用,建议使用默认的hash
模式,如果需要更好的用户体验,可以选择history
模式(需服务器配置支持)。而abstract
模式主要用于非浏览器环境下的应用。
总结一下,Vue Router提供了hash
、history
和abstract
cincang
, alamat URL akan dipisahkan oleh simbol #
dan perubahan dalam URL akan bukan Cetuskan muat semula halaman, tetapi tukar halaman dengan mendengar acara hashchange
. Mod ini agak mudah, tidak memerlukan konfigurasi pelayan khas, dan boleh diakses terus melalui penyemak imbas. Sebagai contoh, apabila kami melawati http://www.example.com/#/home
, kami sebenarnya melawati halaman http://www.example.com
, dan kemudian dengar acara hashchange
melalui Vue Router dan tukar kepada komponen yang sepadan mengikut #/home
. sejarah
, URL alamat adalah nyata URL tidak lagi memerlukan simbol #
Dengan memanggil kaedah history.pushState
dan history.replaceState
, anda boleh menukar. Alamat URL Pada masa yang sama, ia tidak mencetuskan muat semula halaman. Mod ini lebih mesra dan cantik, tetapi memerlukan sokongan konfigurasi khas pada pelayan untuk mengelakkan ralat 404 apabila mengakses URL secara langsung, kerana URL sebenar tidak wujud pada pelayan. cincang
. Ia digunakan terutamanya untuk menggunakan Penghala Vue dalam persekitaran bukan penyemak imbas, seperti persekitaran Node.js atau Apl asli. Dalam mod ini, alamat URL adalah maya Alamat URL ditukar melalui kaedah pushState
dan replaceState
dan popstate
penyemak imbas dipantau. acara untuk melaksanakan penukaran laluan. sejarah
(memerlukan sokongan konfigurasi pelayan). Mod abstrak
digunakan terutamanya untuk aplikasi dalam persekitaran bukan penyemak imbas. 🎜🎜Untuk meringkaskan, Vue Router menyediakan tiga mod penghalaan: cincang
, sejarah
dan abstrak
Hanya pilih mod yang sesuai mengikut keperluan sebenar. Mod yang berbeza mempunyai ciri yang berbeza dan senario penggunaan yang munasabah bagi mod penghalaan boleh memenuhi keperluan navigasi halaman dan pengurusan penghalaan dengan lebih baik. 🎜Atas ialah kandungan terperinci Bagaimana untuk memilih mod penghalaan dalam Penghala Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!