Vue 路由的两种模式:
-
hash 模式 :
类似于住在一个大房子里,你的地址很长,但用一个 "门牌号" (
#
后面的部分)来标识你住哪间房间。例如:
bash
http://example.com/#/home
这就好比 "example.com" 是房子,
#/home
是具体的房间号。 -
history 模式 :
就像住在一个独栋小别墅里,每个房子都有一个完整的门牌地址。
例如:
arduino
http://example.com/home
hash 模式:怎么工作?
-
URL 中的
#
后面是 不会发给服务器的,只是供浏览器和前端用的。- 比如访问
http://example.com/#/home
,服务器只看到http://example.com
,完全忽略#/home
。 - 前端代码通过监听
#
部分的变化 (onhashchange
事件),让页面切换。
- 比如访问
-
为什么好用?
因为它和服务器无关!只需要前端代码实现逻辑,页面切换的时候浏览器不会刷新。
优点:
- 简单,不需要服务器特殊配置。
- 浏览器兼容性很好,所有主流浏览器都支持。
缺点:
- URL 丑陋,有个
#
,看起来不美观。 - 不利于 SEO(因为
#
后的内容不会被搜索引擎抓取)。
history 模式:怎么工作?
-
URL 没有
#
,路径看起来干净漂亮,比如:http://example.com/home
。- 前端用 HTML5 的新技术(
pushState
和replaceState
),控制浏览器的地址栏变化,但页面不会刷新。 - 这种地址会被当成真正的文件路径发给服务器,所以 需要服务器支持,否则直接访问可能会返回 404。
- 前端用 HTML5 的新技术(
-
为什么更复杂?
因为服务器需要知道这个请求应该返回首页
index.html
,否则服务器会以为你在请求/home
文件,但这个文件可能并不存在。
优点:
- URL 美观,没有
#
。 - 支持 SEO,因为搜索引擎可以识别完整的路径。
缺点:
- 需要配置服务器支持,不然会有 404 问题。
- 兼容性稍差(需要支持 HTML5 的浏览器)。
两种模式的对比,换个角度讲:
假设你在学校图书馆工作:
-
hash 模式:
- 图书馆里挂了一个小白板,板上写着"在哪个房间可以找到书"。
- 每次你在小白板上写房间号,比如
#/room3
,大家看了就知道要去 3 号房间找书。 - 不管你怎么改小白板的内容,图书馆本身没有任何变化,也不需要任何调整。
-
history 模式:
- 图书馆直接在每个房间门上写清楚地址,比如
/room3
。 - 但如果有人从外面来,直接走到
/room3
的门口,结果发现门打不开,因为门口没有任何标志,得去找图书馆管理员说明。 - 管理员需要做额外配置,告诉所有人:"不管你来找哪间房,先去前台(首页)拿到指引"。
- 图书馆直接在每个房间门上写清楚地址,比如
怎么选择模式?
- 如果你是简单的前端页面,或者不用考虑 SEO,那直接用 hash 模式 ,简单快捷,URL 里多一个
#
也没什么。 - 如果你是一个正式的商用网站,需要漂亮的 URL(没有
#
),还要对搜索引擎友好,那就用 history 模式 。
注意:要配合服务器配置,不然刷新或直接访问某个路径可能会返回 404。
Vue Router 中的实现:
Vue Router 的 mode
参数决定了用哪种模式:
hash 模式:
javascript
const router = new VueRouter({ mode: 'hash', // 默认是 hash 模式 routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });
history 模式:
javascript
const router = new VueRouter({ mode: 'history', // 启用 history 模式 routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });
history 模式下服务器需要做什么?
如果你用的是 history 模式,你需要告诉服务器,不管访问哪个路径,都返回同一个首页(比如 index.html
),让前端去处理页面切换。
以 Nginx 为例:
nginx
server { listen 80; server_name example.com; location / { root /path/to/your/project; index index.html; try_files $uri /index.html; } }
这段配置的意思是:
- try_files $uri:先看用户访问的路径是不是有对应的文件。
- 如果文件不存在,就返回首页
/index.html
,让前端接管。