前言

vue專案中持續踩坑做一些記錄，以便後面翻閱

專案的url中會自帶#，看起來很不是舒服，其實是vue-router在搞怪，router跳轉有兩種實現方式： 
1. hash（帶#）值模式，vue-router 預設 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入；

1. history模式，如果不想要很醜的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面。

history模式

vue-router預設是hash模式的，我們要切換到history模式，只需在router初始化時，設定mode為history即可。

new Router({
  mode: 'history',
  routes: [ ]
})

這裡面還有一些問題，就是需要考慮到使用者直接輸入URL的頁面不存在的情況，顯示404感覺會不舒服。

這時我們需要有一個通用的頁面，當404時就返回這個頁面，當然這個頁面可以為你的主頁，也可以為其他提示頁面，我是這麼處理的

new Router({
  mode: 'history',
  routes: [
    {
      path: '*',
      name: 'allPage',
      component: AllPage
    }
  ]
})

通用的頁面，如果404就跳轉到此頁面

修改預設頁

我們知道router預設顯示的頁面是配置項中的 ‘/’，如果我們需要讓頁面開啟預設顯示 ‘/index’頁面呢，這裡就引出了路由的重定向配置，具體如下圖：

官網文件檢視