傳送門 https://router.vuejs.org/zh-c...

Router 構造配置

routes

• 類型: Array<RouteConfig>

  RouteConfig 的類型定義：

  declare type RouteConfig = {
    path: string;
    component?: Component;
    name?: string; // 命名路由
    components?: { [name: string]: Component }; // 命名視圖組件
    redirect?: string | Location | Function;
    props?: boolean | string | Function;
    alias?: string | Array<string>;
    children?: Array<RouteConfig>; // 嵌套路由
    beforeEnter?: (to: Route, from: Route, next: Function) => void;
    meta?: any;
  
    // 2.6.0+
    caseSensitive?: boolean; // 匹配規則是否大小寫敏感？(默認值：false)
    pathToRegexpOptions?: Object; // 編譯正則的選項
  }
   
  

mode

• 類型: string

• 默認值: "hash" (瀏覽器環境) | "abstract" (Node.js 環境)

• 可選值: "hash" | "history" | "abstract"

  配置路由模式:

  • hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。

  • history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。

  • abstract: 支持所有 JavaScript 運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

現在前端路由的3種模式，常用的是 hash模式(地址有 # 號) 和 history模式 (地址和真實請求沒區別)

另外,

# 是 vue-router 使用的hash符號

#!是 angularjs Route 使用的hash符號

這個無所謂, 有 # 就行（瀏覽器不會發生頁面跳轉）

#是hash模式
history模式不帶#號，
但部署到服務器的話
hash模式不會出現刷新404問題。。
history模式如果刷新或者直接連接進入某個頁面，會提示404。。。
傳統方式，後端程序會實際生成一個文件，連接請求能真的找到一個文件。。
這種單頁式只有一個html，也不是後端程序不會自動生成文件。。
所以如果用history模式，部署到服務器的時候需要配置虛擬路徑
如果請求不到資源的情況下都指向index.html文件

vue-router 的URL路徑中#的意義