Vue路由模式有哪些

Vue 路由是指根据 url 分配到对应的处理程序作用就是解析 URL,调用对应的控制器(的方法,并传递参数)。Vue 路由有助于在浏览器的 URL 或历史记录与 Vue 组件之间建立链接,从而允许某些路径渲染与之关联的任何一个视图。那么 vue 路由模式有哪些呢?

vue 路由 Vue routing

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 给别人,这种方式对于搜索引擎和用户来说都是友好的

免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部