Vue笔记_04vue全家桶_路由模式_router_hash路由与history路由

SPA

SPA–singlePage application指的是单页面应用程序

单页面的执行原理

单页面应用程序将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、CSS 和JavaScript 。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容。避免页面的重新加载，可以提供较为流畅的用户体验。

单页面的优点

• 由一个页面外壳+多个页面片段构成；
• 切换页面的时候不会对页面进行重新加载，而是使用js动态切换html中的内容；因此页面之间切换比较块，不会出现白屏现象，用户体验度比较好；

单页面的缺点

• seo搜索引擎差：搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名；使用单页面需要重新做搜索引擎
• 首屏加载速度慢：因为在页面初始化时将所有的组件都一起加载；使用单页面可以使用路由懒加载技术和异步加载组件提高首屏加载速度。

Vue路由

使用vue创建一个单页面的应用，有hash和history两种路由模式，可以在创建实例化对象时通过 mode属性进行配置

import VueRouter from 'vue-router'
const router =  new VueRouter({
  mode:'hash' // hash模式-默认
  mode:'history' // history模式
})

hash模式

在hash模式下：每一个url里面都会包含# ，# 就是 hash符号，在 hash 符号后的值称为 hash 值。
以下面的url为例说明 hash模式下的路由配置

http://192.168.1.9:8080/#/about

在hash模式下是使用hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载(当前url虽然改变，但是此url不会发送请求),而是通过javascript动态改变页面内容；

• [1] 在我们配置路由时，配置路由的path其实就是当前url的hash值-形成一一对应关系；
• [2]hash值只对客户端有影响->当url(hash)改变时，通过window的hashchange事件来指导浏览器动作(如添加一条记录);
• [3]hash值对服务端没有影响->当我们刷新页面时，服务端接收到的 URL 请求永远是 http://192.168.1.9:8080,不包含hash部分；

history模式

在history模式下：url看起来就是一个正常的url

http://192.168.1.9:8080/about

在history模式下，当 URL 改变时页面不会重新加载(当前url虽然改变，但是此url不会发送请求),而是通过javascript动态改变页面内容；

• [1]在我们配置路由时，配置路由的path其实就是当前url-形成一一对应关系；
• [2]当前url既会影响客户端也会影响服务端
  • 当url改变时，使用html5新增的pushState和replaceState方法动态向历史栈中添加记录；
  • 当我们刷新页面时，服务端接收到的 url就是当前url;
    • 因此使用history模式需要服务端进行一定的配置-服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。不然页面会报404.

示例

我通过vue-cli创建了一个使用history模式下的项目，使用命令 npm run serve运行，刷新页面，发现没有报404(没有后端进行配置)。
原因：内置的webpack帮我们进行了一定的配置

historyApiFallback: {
  index: '/index.html' // 访问访问不到的页面就返回html页面
},

我们可以自己创建一个webpack的配置文件，然后去掉此配置项，重新运行，刷新页面，会发现报错如下：