在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模式的方法和要點,希望對你有所幫助。