vue-router的理解(模式、单页面应用等概念的解释)

什么是路由？去美女家修一晚上路由器那个路由吗？

路由的作用就是我的页面变了，但其实我没向后端发请求（个人理解）

太长不看版（转载自站内Army-海军 原链接 https://blog.csdn.net/weixin_41229588/article/details/105365252）

看下 window.location对象

打开浏览器在控制台打印

路由在未交由前端管理之前都是后台控制

你请求不同的路径，后台就甩回不同的html页面回来作为回应。你请求a我就给你a,你请求不存在我就给你个404页面

vue-router就是只改变视图，不请求页面。你看到的是假象。实际上请求的都是index.html。
1、Hash模式：
hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；

2、History模式：

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面；

也就是这俩货可以任由我们改，但是不刷新页面。

所以当我们在用vue-router 中的hash模式，最后打包生成的文件，不需要后台做什么更改。直接可以用、

但是History模式，后台部署时类似于nginx这种，就要加些代码、

比如这样子

location / {
  root  /Users/jhj/Desktop/mall;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}

这段代码的意思就是告诉服务器，前边请求啥你都去找index.html,其他你都不要干涉、

不加这段的话，当代码部署的时候就会发现你的路由失效了。不能刷新等等情况。

另外类似于微信支付等等一些接口，你的返回链接里不能有hash值、否则他从后边都给你截掉，这一截掉，瞬间傻屌。

所以强烈建议用历史模式

——————————————手动分割——————————————————

从概念进行解释==》

vue-rouer

一、概念

1、单页面应用与多页面应用

单页面应用(SPA)，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的Ihtml. js, css (非必须文件可以使用懒加载，缩短首屏渲染时间)。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写(页面片段)，然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

多页面(MPA:Mult-page Application)，就是指一个应用中有多个页面，页面跳转时是整页刷新。

2、路由

何为路由呢?通俗点就是网址，就是根据不同的url地址展示不同的内容或页面。而如何区分前端路由和后端路由，其实就是看把不同路由对应不同的内容或页面的任务是掌握在前端还是在后端手里。

前端路由，自然是把不同路由对应的不同内容掌握在前端，vue中的vue-router、angular的ngRouter、react的lReactRouter。
前端路由出现在单页面应用中，页面中公共部分不变，只改变部分内容的使用。路由切换时根据不同的路由动态加载不同的组件。

后端路由就是该任务掌握在后端，见于多页面应用中。每次GET或者POST请求，在服务端有一个专门的正则配置列表，然后匹配到具体的路径之后，分发到不同的controller，进行各种操作，最后服务端将html或者数据返回给前端。

需要注意的是:

1、页面可以是服务端获取数据，然后和模板组合，返回HTML。也可以是直接返回模板HTML，然后由前端s再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。
2、每跳转到不同的URL，都是重新访问服务端

后端路由优点是:

页面直接在服务端渲染好返回给浏览器，不用等待前端加载任何js和css等就可以显示在页面上。
缺点是:

1、页面、数据、逻辑混为一谈，程序臃肿。
2、前端开发人员需要安装整套后台服务，甚至学习java等后台语言。

二、Vue-Router前端路由的两种模式

1、一种是利用url的hash，就是通常所说的锚点#，javascript通过hashChange事件来监听url的变化，IE7以下需要轮询。

比如这个URL: http://ww.abc.com/#/hello，hash的值为#/hello。它的特点在于: hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash 不会重新加载页面。

2、另一种是HTML5的History模式，它使url看起来像普通网站那样，以P分割，没有#，单页面并没有跳转。不过使用这种模式需要服务端支持，服务端在接收到所有请求后，都只想同一个html文件，不然会出现404。因此单页面应用只有一个html 整个网站的内容都在这一个html里，通过js来处理

history模式利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。
hash模式和 history模式都属于浏览器自身的特性，Vue-Router只是利用了这两个特性(通过调用浏览器提供的接口）来实现前
端路由。

hash模式和history模式都是属于浏览器自身的特性，Vue-Router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由

—————————————————手动分割线——————————————

详解

对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变视图的同时不会向后端发出请求。

为了达到这一目的，浏览器当前提供了一下两种支持：

1：hash - 即地址栏URL中的 井号符号 (vue-router默认hash模式)
比如这个URL：http：//www.abc.com/#/hello,hash的值为#/hello.它的特点在于：hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
由于hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了，尽管浏览器没有请求服务器，但是页面状态和url关联起来。后来人们称其为前端路由，成为单页应用标配。

hash模式背后的原理是onhashchange事件。

window.onhashchange=function(){
 let hash=location.hash.slice(1);
 document.body.style.color=hash;
}1234

2：history - 利用了HTML5 History Interface中新增的pushState()和replaceState（）方法。（需要特定浏览器支持）

这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会即向后端发送请求。

当使用history模式时，url就像正常的url,例如http://abc.com/user/id相比hash模式更加好看。特别注意，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
通过history api，我们丢弃了丑陋的井号，但是有一个缺点，当刷新时，如果服务器中没有相应的相应或者资源，会分分钟刷出一个404来（刷新需要请求服务器）。所以history模式不怕前进，不怕后退，就怕刷新。

因此可以说，hash模式和histoury模式都是属于浏览器自身的特性，Vue-Router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由

——————————————手动分割——————————————————

使用场景

一般情景下，hash和history都可以，除非你更在意颜值，#符号夹杂在URL里看起来确实有些不太美丽。如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history。pushState API来完成URL跳转二无须重新加载页面。

调用history.pushState()相比于直接修改hash ，存在以下优势：
1：pushState()设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，因此只能设置与当前URL同文档的URL；
2：pushState()设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
3：pushState()通过stateObject参数可以添加任意类型的数据到记录中；而hash只可添加短字符串；
4：pushState()可额外设置title属性供后续使用。

当然history也不是样样都好。SPA虽然在浏览器里游刃有余，但真要通过URL向后端发起HTTP请求时，两者的差异就来了。尤其在用户手动输入URL后回车，或者刷新（重启）浏览器的时候。
1：hash 模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com,因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
2：history模式下，前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理，将返回404错误、

hash模式和history模式对比

pushState()设置新的url可以是和当前url同源的任意url;hash只可修改#后面的部分，只能设置当前url同文档的url。

pushState()设置的新url可与当前url一致，这样也会把记录添加到栈中；hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中。

pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串。
pushState()可额外设置title属性供后续使用。

不过，hash模式也有比history模式优势的地方。

hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误。

history模式下，前端的url必须和实际向后端发起请求的url一致，如http://abc.com/user/id,后端如果没有对user/id的路由处理，将返回404错误。

history模式要玩好，需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问http : / / www.yongcun.wang/tclass就会返回404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。
给个警告，因为这么做以后，你的服务器就不再返回404错误页面，因为对于所有路径都会返回index.html文件。为了避免这种情况，你应该在Vue 应用里面覆盖所有的路由情况，然后在给出一个404页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})