vue-route路由详解

全文链接

路由分类

后端路由：value是function，用于处理客户端提交的请求 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：value是component，用于展示页面内容 工作过程：当浏览器的路径改变时，对应的组件就会显示，前端路由指的是hash地址与组件之间的对应关系

vue-router路由模式

hash模式和history模式，默认的是hash模式

哈希模式

简介： hash 模式是开发中默认的模式，它的 URL 带着一个#，例如：http://www.abc.com/#/vue，它的 hash 值就是#/vue。

特点：hash指的是地址中#号以及后面的字符，也称为散列值；hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面；浏览器兼容好，是开发中默认的模式；hash变化对应的url都会被浏览器记录在历史访问栈中，可以使用浏览器的前进后退功能，虽然没有请求服务器，但页面内容和url一一对应；hash模式的工作原理是hashchange事件，window就可以监听hash的变化，而不需要向后端发起请求，并按规则加载相应的代码

历史模式

简介： history 模式的 URL 中没有#，它使用的是传统的路由分发模式，即用户在输入一个 URL 时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。

特点：书写简洁，没有#；主要使用了HTML5新增的pushState()和replaceState()这两个api结合window.popstate事件来实现的；pushState()可以改变url地址但不会发送请求；replaceStat