色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue使用history模式

謝彥文1年前8瀏覽0評論

在Vue中,有兩種路由模式:hash模式和history模式,兩種模式本質上是一樣的,都是為了實現前端單頁面應用的路由切換效果。今天我們主要講一下history模式。

在Vue中,要使用history模式,需要在創建Vue實例的時候傳入一個router對象,此對象可以通過Vue Router庫創建,具體代碼如下:

const router = new VueRouter({
mode: 'history',
routes: [...]
})
const app = new Vue({
router
}).$mount('#app')

其中,mode屬性的值為'history',表示使用history模式。routes屬性是路由配置數組,具體的路由配置可以在數組里面定義,例如:

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]

在使用history模式的時候,URL上面不再有'#',而是正常的路徑格式,例如:

http://localhost:8080/about

因此,在使用history模式的時候,需要后端服務器的支持。因為在history模式下,刷新瀏覽器會向服務器發送一個請求,如果服務器沒有配置,就會返回404錯誤。

在history模式下,還要注意以下幾點:

1. URL中不能有'.',否則會被當成靜態資源請求。

2. 如果你在嵌套路由中使用history模式,需要在父級路由中加上<base>標簽,例如:

const router = new VueRouter({
mode: 'history',
base: '/myapp/', // 注意這里,不要忘了最后的'/'
routes: [...]
})

3. 如果你使用了webpack-dev-server作為開發服務器,需要在配置文件中加上以下代碼,不然刷新瀏覽器會發生404錯誤:

devServer: {
historyApiFallback: true
}

以上就是Vue中使用history模式的方法和要點,希望對你有所幫助。