vue實戰開發001:如何去除路徑中的 #/
阿新 • • 發佈:2018-11-10
我們在採用vue-cli 自動構建的vue腳手架開發專案時,前後端分離一般會使用vue-router來配置路由,這時我們會發現在路徑中會有#的欄位,總感覺很彆扭。
http://localhost:8080/#/
其實vue-router有兩種模式,hash模式和history模式,帶#的是hash模式,不帶#的則是history模式,vue-router預設為hash模式,所以這裡我們主要將其改為history模式即可。
history 模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面
http://localhost:8080/
那麼怎麼來實現呢,很簡單,只要將router中的mode設定為history就可以了。
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })