Vue的路由实现模式:hash模式和history模式

Vue 路由的两种模式:

  1. hash 模式

    类似于住在一个大房子里,你的地址很长,但用一个 "门牌号"# 后面的部分)来标识你住哪间房间。

    例如:

    复制代码

    bash

    http://example.com/#/home

    这就好比 "example.com" 是房子,#/home 是具体的房间号。

  2. history 模式

    就像住在一个独栋小别墅里,每个房子都有一个完整的门牌地址。

    例如:

    复制代码

    arduino

    http://example.com/home


hash 模式:怎么工作?

  1. URL 中的 # 后面是 不会发给服务器的,只是供浏览器和前端用的。

    • 比如访问 http://example.com/#/home,服务器只看到 http://example.com,完全忽略 #/home
    • 前端代码通过监听 # 部分的变化onhashchange 事件),让页面切换。
  2. 为什么好用?

    因为它和服务器无关!只需要前端代码实现逻辑,页面切换的时候浏览器不会刷新。

优点:
  • 简单,不需要服务器特殊配置。
  • 浏览器兼容性很好,所有主流浏览器都支持。
缺点:
  • URL 丑陋,有个 #,看起来不美观。
  • 不利于 SEO(因为 # 后的内容不会被搜索引擎抓取)。

history 模式:怎么工作?

  1. URL 没有 #,路径看起来干净漂亮,比如:http://example.com/home

    • 前端用 HTML5 的新技术(pushStatereplaceState),控制浏览器的地址栏变化,但页面不会刷新。
    • 这种地址会被当成真正的文件路径发给服务器,所以 需要服务器支持,否则直接访问可能会返回 404。
  2. 为什么更复杂?

    因为服务器需要知道这个请求应该返回首页 index.html,否则服务器会以为你在请求 /home 文件,但这个文件可能并不存在。

优点:
  • URL 美观,没有 #
  • 支持 SEO,因为搜索引擎可以识别完整的路径。
缺点:
  • 需要配置服务器支持,不然会有 404 问题。
  • 兼容性稍差(需要支持 HTML5 的浏览器)。

两种模式的对比,换个角度讲:

假设你在学校图书馆工作:

  1. hash 模式:

    • 图书馆里挂了一个小白板,板上写着"在哪个房间可以找到书"。
    • 每次你在小白板上写房间号,比如 #/room3,大家看了就知道要去 3 号房间找书。
    • 不管你怎么改小白板的内容,图书馆本身没有任何变化,也不需要任何调整。
  2. history 模式:

    • 图书馆直接在每个房间门上写清楚地址,比如 /room3
    • 但如果有人从外面来,直接走到 /room3 的门口,结果发现门打不开,因为门口没有任何标志,得去找图书馆管理员说明。
    • 管理员需要做额外配置,告诉所有人:"不管你来找哪间房,先去前台(首页)拿到指引"。

怎么选择模式?

  1. 如果你是简单的前端页面,或者不用考虑 SEO,那直接用 hash 模式 ,简单快捷,URL 里多一个 # 也没什么。
  2. 如果你是一个正式的商用网站,需要漂亮的 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,让前端接管。
相关推荐
桃园码工11 分钟前
4_使用 HTML5 Canvas API (3) --[HTML5 API 学习之旅]
前端·html5·canvas
桃园码工13 分钟前
9_HTML5 SVG (5) --[HTML5 API 学习之旅]
前端·html5·svg
人才程序员37 分钟前
QML z轴(z-order)前后层级
c语言·前端·c++·qt·软件工程·用户界面·界面
m0_5485147739 分钟前
前端三大主流框架:React、Vue、Angular
前端·vue.js·react.js
m0_748232391 小时前
单页面应用 (SPA):现代 Web 开发的全新视角
前端
开心工作室_kaic1 小时前
springboot461学生成绩分析和弱项辅助系统设计(论文+源码)_kaic
开发语言·数据库·vue.js·php·apache
孤留光乩1 小时前
从零搭建纯前端飞机大战游戏(附源码)
前端·javascript·游戏·html·css3
伊泽瑞尔.1 小时前
el-tabs标签过多
前端·javascript·vue.js
毕设资源大全2 小时前
基于SpringBoot+html+vue实现的林业产品推荐系统【源码+文档+数据库文件+包部署成功+答疑解惑问到会为止】
java·数据库·vue.js·spring boot·后端·mysql·html
2401_854391082 小时前
智能挂号系统设计典范:SSM 结合 Vue 在医院的应用实现
前端·javascript·vue.js