Vue 路由的前提知识

什么是前端渲染？什么是后端渲染？

众所周知，后端渲染也称服务器渲染，词如其意，就是先将代码全部部署到服务器上，客户端进行请求时服务器将运行好的代码网页传回到客户端。而前端渲染就是将预先写的代码模板下载到浏览器之中，通过浏览器去运行进行的一个渲染。

阶段一：后端渲染示意图如下：

阶段二：前后端分离
随着AJAX的出现，有了前后端的分离方式，前后端分离标示着后端不用做HTML模板的生成，而改由前端去做，浏览器请求先通过静态资源服务器下载（静态资源服务器专门存放前端代码，一般与后端的API接口服务器在一起，在这里好记分开了）代码，通过前端所写的JS代码在浏览器中执行，后端只负责着API接口服务。这里演示着浏览器发送请求到静态服务器当中，HTML+CSS+JS资源下载到浏览器当中，通过运行JS代码而后发现需要用到API接口后到后端服务器中获取数据，然后大量数据在浏览器时运行其他的JS代码生成div标签，最终将数据渲染出来，形成前后端的分离效果。

阶段三：SPA(单页面富应用）
在单页面富应用当中，与早期的前后端最大的不同便是在于对HTML模板的运用，在前后端当中，浏览器下载的HTML模板这些有几套可以使用，但是在SPA当中却只有一套，例如图中，就是在静态资源中将唯一一套HTML+CSS+JS下载下来，在此时浏览器并不执行所有的代码，而是通过不同按钮点击时，执行响应的代码，例如点击男装按钮，这是浏览器会执行男装相关的代码，生成页面。

什么是后端路由?什么是前端路由？

既然后端渲染是通过服务器来进行渲染，那么管理URL和页面模板的对应关系自然是由服务器承担，后端路由便是服务器本身。
前端路由就是由前端管理的路由，在VUE中就是Vue router，实现上面所说的SPA页面按钮的效果时，就需要一种技术进行管理，那便是前端路由，前端路由来管理映射关系，当点击响应的按钮产生URL时，并不会向服务器中请求资源，而是通过JS代码的判断将抽取相应的代码在页面中显示，那抽取的东西在VUE中就是一个组件。
示意图如下：

改变URL地址却不刷新的两种方式

有时候我们需要改变URL地址时却不想它刷新页面，那么我们有两种方式，一种是hash，URL的hash也就是锚点#，本质上是改变window.location的herf属性，因此我们可以直接赋值location.hash来改变href，却不使网页发生刷新。

使用命令location.hash = ‘aaa’ 修改url

另外一种就是history模式，这是专属于HTML5专用的，它有五种模式改变改变URL而不刷新页面。而且history是属于栈的模式类型，先进后出。
指令一：history.pushState({},’’,‘aaa’) 修改URL


指令二：history.replaceState({},’’,‘bbb’) 替换URL


指令三：history.back() 返回到之前一个页面URL

指令四：history.forward() 返回到后一个页面URL

指令五：history.go（）
history.back()=history.go(-1)
history.forward=history.go(1)
这三个方法相当于浏览器的前进后退