SPA应用路由的基本原理

SPA和普通网页应用的区别

普通网页

1、跳转到新页面，每次重新加载所有资源

2、HTML内容是后端直接渲染的

SPA应用

1、不跳转，JS 拦截跳转，修改URL

2、与后端进行数据交互

3、JS动态渲染 DOM 内容

SPA路由的实现方式

官网：https://router.vuejs.org/zh/guide/essentials/history-mode.html#hash-%E6%A8%A1%E5%BC%8F

HTML5模式

利用了 HTML5 History中新增的 pushState() 和 replaceState() 方法实现

点击浏览器后退按钮，会触发window.onpopstate(https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event)方法

问题：

1、刷新的话会报错

解决办法：服务端Nginx配置

location / {
  try_files $uri $uri/ /index.html;

hash模式

在url后面添加#字符，比如这个 URL：www.baidu.com/#/hello hash 的值为 #/hello

特点：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

优点：

1、速度快

2、体验好

3、为前后端分离提供了实践场所

缺点：

1、在 SEO 中有不好的影响

对比

1、语法结构不同

hash模式的url中有#号，history为正常的url方式

2、部署方式不同

history模式在nginx中部署时，需要添加try_files $uri $uri/ /index.html;这行代码，这是为了解决history模式下刷新报错的问题

3、SEO

hash模式不利于SEO