## 一、概述 路由就是URL到函数的映射，在 Web 服务的程序中，不同路径对应着各自的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。简单的说，路由是根据不同的 url 地址展示不同的内容或页面； 路由为前端路由和后端路由； 后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源，通过用户请求的url导航到具体的html页面； 前端路由：通过配置js文件，把后端路由的工作拿到前端来做； 后端路由是传统的路由处理方式，这里着重介绍前端路由； ## 二、基于hash实现的前端路由 它的 URI 规则中需要带上#； ``` 1 http://10.0.0.1/ 2 http://10.0.0.1/#/about 3 http://10.0.0.1/#/concat ``` Web 服务不会解析 hash，也就是说 # 后的内容 Web 服务都会自动忽略，但是 JavaScript 是可以通过 window.location.hash 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。 ### hash有以下几个特性： 1. hash仅仅是客户端的一个状态，也就是说，当向服务器发请求的时候，hash部分并不会发过去。 2. hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。 ### 触发hash变化的两种方式： 1. 通过a标签，并设置href属性，当用户点击这个标签后，URL就会发生改变，也就会触发hashchange事件了： ``` <a href="#srtian">srtian</a> ``` 2. 直接使用JavaScript来对loaction.hash进行赋值，从而改变URL，触发hashchange事件： ``` location.hash="#srtian" ``` ## 三、基于history API实现的前端路由 history 是 HTML5 才有的新 API，可以用来操作浏览器的 session history； ``` 1 http://10.0.0.1/ 2 http://10.0.0.1/about 3 http://10.0.0.1/concat ``` ``` window.history.pushState(state, title, url) ``` 其中state和title可以为空,url中填上/ 、/about、/concat ## 四、前端路由的使用场景 前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。 ## 五、Vue-router库 Vue-router是基于单页面使用，多页面直接使用服务端路由系统就可以了。 每一个路由规则都是一个对象。 | 名称 | 说明 | | --- | --- | | path | 表示监听哪一个路由链接地址。| | componrnt |表示路由是前面匹配到的path，则显示component对应的那个组件。 | | name| 给这个页面路径定义一个名字，当在页面进行跳转的时候也可以使用名字跳转。具有唯一性。| 可以使用```<router-link to='路径'></router-link>```实现跳转； rourter.push()