Vue Router中的mode參數(shù)

Vue Router是Vue.js的官方路由插件，它能夠幫助開發(fā)者實(shí)現(xiàn)單頁(yè)面應(yīng)用（SPA）的路由功能。mode參數(shù)是Vue Router中的一個(gè)重要參數(shù)，它控制著路由的模式，可以有以下幾種模式：

hash

hash模式是默認(rèn)模式，它會(huì)將路由的URL中的#作為路由的開始標(biāo)志，例如：

// 路由
const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

// 對(duì)應(yīng)的URL
http://example.com/#/foo
http://example.com/#/bar

hash模式的優(yōu)點(diǎn)是兼容性比較好，可以在不支持HTML5 history API的瀏覽器上正常運(yùn)行，但是它會(huì)在URL中加上一個(gè)#，不夠優(yōu)雅。

history

history模式是基于HTML5 history API的，它的URL比hash模式的URL更加優(yōu)雅，例如：

// 路由
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

// 對(duì)應(yīng)的URL
http://example.com/foo
http://example.com/bar

但是history模式要求服務(wù)器端配置支持，如果沒(méi)有對(duì)應(yīng)的服務(wù)器端配置，則會(huì)出現(xiàn)404錯(cuò)誤。

abstract

abstract模式是一種特殊的模式，它不會(huì)產(chǎn)生URL，也不會(huì)在瀏覽器的歷史記錄中留下記錄，它是基于Node.js的history模塊實(shí)現(xiàn)的，可以在Node.js環(huán)境中使用，例如：

// 路由
const router = new VueRouter({
  mode: 'abstract',
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

abstract模式只能在Node.js環(huán)境中使用，它不會(huì)產(chǎn)生URL，也不會(huì)在瀏覽器的歷史記錄中留下記錄，它不適合瀏覽器環(huán)境。

使用方法

使用Vue Router的mode參數(shù)時(shí)，只需要在實(shí)例化Vue Router時(shí)，添加mode參數(shù)，并設(shè)置相應(yīng)的模式即可，例如：

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

在實(shí)際應(yīng)用中，一般情況下，使用hash模式即可，如果要使用history模式，則需要在服務(wù)器端配置支持，如果只是在Node.js環(huán)境中使用，則可以使用abstract模式。

千鋒教育是高品質(zhì)web前端培訓(xùn)機(jī)構(gòu)，千鋒教育擁有大量實(shí)力web前端培訓(xùn)講師，提供優(yōu)質(zhì)的web培訓(xùn)課程，web前端培訓(xùn)，歡迎報(bào)名千鋒教育。