一、路由

简单来说，路由就是URL到函数的映射。
在 Web 服务的程序中，不同路径对应着各自的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。
以前路由都是后台做的，通过用户请求的url导航到具体的html页面，前端路由就是通过配置js文件，把这个工作拿到前端来做。
简单的说，路由是根据不同的 url 地址展示不同的内容或页面

二、后端路由：

对于服务器来说，当接收到客户端发来的HTTP请求，会根据请求的URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。

三、前端路由

前端路由的映射函数通常是进行一些DOM的显示和隐藏操作。当访问不同的路径的时候，会显示不同的页面组件。前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。

1.基于hash实现的前端路由

在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用 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 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。（重点）

window.onhashchange = function() {
  var hash = window.location.hash
  var path = hash.substring(1)
  switch (path) {
    case '/':
      showHome()
      break
    case '/users':
      showUsersList()
      break
    default:
      show404NotFound()
  }
}

hash有以下几个特性：

• hash仅仅是客户端的一个状态，也就是说，当向服务器发请求的时候，hash部分并不会发过去。
• hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。

触发hsah变化的两种方式：

• 通过a标签，并设置href属性，当用户点击这个标签后，URL就会发生改变，也就会触发hashchange事件了：

<a href="#srtian">srtian</a>

• 直接使用JavaScript来对loaction.hash进行赋值，从而改变URL，触发hashchange事件：

location.hash="#srtian"

2.基于history API实现的前端路由

history 是 HTML5 才有的新 API，可以用来操作浏览器的 session history。基于 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, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

前端路由优缺点

• 优点
  1）从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
  2）在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户复制到的地址不能反映这些变化，用前端路由做单页面网页就很好的解决了这个问题，即把变化反映在url中。
• 缺点
  使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。（查资料做进一步了解）

四、Vue-router库

页面中所有的内容都是组件化的，只需要把路径跟组件对应，在页面中把组件渲染出来。
1.页面实现：在vue-router中, 它定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击的部分， 定义显示部分。
2.js中配置路由：首先要定义route,一条路由的实现，他是一个对象，由path和component组成。

这里的两条路由，组成routes：

const routes = [
    {// 首页
        path: '/',
        component: () => import('src/pages/home/index.vue'),
    },
    {// 首页更多功能
        path: '/functionManage',
        component: () => import('src/pages/home/functionManage.vue'),
    },
]

创建router对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
router.js文件中

const router = new VueRouter({
    routes,
})

配置完成后，把router 实例注入到 vue 根实例中。
main.js文件中

window.vm = new Vue({
    router,
})

执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 标签所在的地方。
前端路由是通过改变URL，在不重新请求页面的情况下，更新页面视图。

参考：

https://zhuanlan.zhihu.com/p/24814675
https://www.cnblogs.com/yuqing6/p/6731980.html
https://www.jianshu.com/p/d2aa8fb951e4
https://juejin.im/post/5b08c9ccf265da0dd527d98d