Vue路由模式有hash模式,使用URL的hash值来作为路由,支持所有浏览器;history模式,依赖于HTML5 API(旧浏览器不支持)和HTTP服务端配置;abstract模式,适用于所有JavaScript环境。
Vue 路由是指根据 url 分配到对应的处理程序;作用就是解析 URL,调用对应的控制器(的方法,并传递参数)。Vue 路由有助于在浏览器的 URL 或历史记录与 Vue 组件之间建立链接,从而允许某些路径渲染与之关联的任何一个视图。那么 vue 路由模式有哪些呢?
Vue 路由模式有哪些
1.hash 模式
使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载,其显示的网路路径中会有 “#” 号,有一点点丑。这是最安全的模式,因为他兼容所有的浏览器和服务器。
2.history 模式
美化后的 hash 模式,会去掉路径中的 “#”。依赖于 Html5 的 history,pushState API,所以要担心 IE9 以及一下的版本,感觉不用担心。并且还包括 back、forward、go 三个方法,对应浏览器的前进,后退,跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作。
但是 history 也是有缺点的,不怕前进后退跳转,就怕刷新(如果后端没有准备的话),因为刷新是实实在在地去请求服务器了。
3.abstract 路由模式
abstract 是 vue 路由中的第三种模式,本身是用来在不支持浏览器 API 的环境中,充当 fallback,而不论是 hash 还是 history 模式都会对浏览器上的 url 产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由 path,这就利用到了 abstract 这种与浏览器分离的路由模式。
总结:vue 路由模式有 hash 模式,使用 URL 的 hash 值来作为路由,支持所有浏览器;其 url 路径会出现“#”字符;history 模式,依赖于 HTML5 API(旧浏览器不支持)和 HTTP 服务端配置,没有后台配置的话,页面刷新时会出现 404;abstract 模式,适用于所有 JavaScript 环境,如果没有浏览器 API,路由器将自动被强制进入此模式。
为什么要使用路由
在传统的 web 开发中每一个请求地址都会请求服务器来进行处理,但是用户有些操作则无需请求服务器,直接页面端修改下逻辑就能达到目的,在这种方式下最好的方法是使用路由,因为使用路由时,URL 会随着改变,用户浏览一个网页时可以直接复制或收藏当前页面的 URL 给别人,这种方式对于搜索引擎和用户来说都是友好的