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

傳送門 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文件