简单的来说,路由跳转其实就是用来后台服务器进行的一种交互方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的一种功能。
vue-router 提供了三种运行模式:
● hash: 使用 URL hash 值来作路由。默认模式。
● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端
1、hash模式
hash即浏览器url中#后面的内容,包含#。
随着ajax的流行,异步数据的请求交互运行在不同的情况下进行。而用户的更高级别的版本SPA–单页面。单页面在应用不仅仅是在无刷新的,在页面跳转也是不刷新的。为了实现单页应用,所以就有了单页应用
hash路由跳转会有“#“,hash值每次变化的时候,都会触发hashchange事件。这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作
2、history模式
因为HTMl5的正式发布,所以多了两个API。pushState和replaceState通过API去请求。过这些就能用另一种方式来实现前端路由了,但原理都是跟 hash 实现相同的。用了 HTML5 的实现,单页路由的 url 就不会多出一个#,变得更加美观。但因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器就会向服务器重新请求一次,这样就影响了正常的开发环境,为了避免这样的情况。我们需要去把所有的页面重定向到根页面。
3、abstract
他是一个虚拟管理应用后端。
根据平台差异可以看出,在 Weex 环境中只支持使用 abstract 模式。 不过,vue-router 自身会对环境做校验,如果发现没有浏览器的 API,vue-router 会自动强制进入 abstract 模式,所以 在使用 vue-router 时只要不写 mode 配置即可,默认会在浏览器环境中使用 hash 模式,在移动端原生环境中使用 abstract 模式。 (当然,你也可以明确指定在所有情况下都使用 abstract 模式)。