Vue路由模式有哪些

玩技站长 科技常识评论85字数 956阅读模式
摘要Vue路由模式有hash模式,使用URL的hash值来作为路由,支持所有浏览器;history模式,依赖于HTML5 API(旧浏览器不支持)和HTTP服务端配置;abstract...

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

vue 路由 Vue routing
文章源自玩技e族-https://www.playezu.com/516319.html

Vue 路由模式有哪些

1.hash 模式文章源自玩技e族-https://www.playezu.com/516319.html

使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载,其显示的网路路径中会有 “#” 号,有一点点丑。这是最安全的模式,因为他兼容所有的浏览器和服务器。文章源自玩技e族-https://www.playezu.com/516319.html

2.history 模式文章源自玩技e族-https://www.playezu.com/516319.html

美化后的 hash 模式,会去掉路径中的 “#”。依赖于 Html5 的 history,pushState API,所以要担心 IE9 以及一下的版本,感觉不用担心。并且还包括 back、forward、go 三个方法,对应浏览器的前进,后退,跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作。文章源自玩技e族-https://www.playezu.com/516319.html

但是 history 也是有缺点的,不怕前进后退跳转,就怕刷新(如果后端没有准备的话),因为刷新是实实在在地去请求服务器了。文章源自玩技e族-https://www.playezu.com/516319.html

3.abstract 路由模式文章源自玩技e族-https://www.playezu.com/516319.html

abstract 是 vue 路由中的第三种模式,本身是用来在不支持浏览器 API 的环境中,充当 fallback,而不论是 hash 还是 history 模式都会对浏览器上的 url 产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由 path,这就利用到了 abstract 这种与浏览器分离的路由模式。文章源自玩技e族-https://www.playezu.com/516319.html

总结:vue 路由模式有 hash 模式,使用 URL 的 hash 值来作为路由,支持所有浏览器;其 url 路径会出现“#”字符;history 模式,依赖于 HTML5 API(旧浏览器不支持)和 HTTP 服务端配置,没有后台配置的话,页面刷新时会出现 404;abstract 模式,适用于所有 JavaScript 环境,如果没有浏览器 API,路由器将自动被强制进入此模式。文章源自玩技e族-https://www.playezu.com/516319.html

为什么要使用路由

在传统的 web 开发中每一个请求地址都会请求服务器来进行处理,但是用户有些操作则无需请求服务器,直接页面端修改下逻辑就能达到目的,在这种方式下最好的方法是使用路由,因为使用路由时,URL 会随着改变,用户浏览一个网页时可以直接复制或收藏当前页面的 URL 给别人,这种方式对于搜索引擎和用户来说都是友好的文章源自玩技e族-https://www.playezu.com/516319.html

玩技站长微信
添加好友自动发送入群邀请
weinxin
rainbow-shownow
玩技官方公众号
官方微信公众号
weinxin
PLAYEZU
 
  • 版权提示:本站仅供存储任何法律责任由作者承担▷诈骗举报◁▷新闻不符◁▷我要投稿◁
    风险通知:非原创文章均为网络投稿真实性无法判断,侵权联系2523030730
    免责声明:内容来自用户上传发布或新闻客户端自媒体,切勿!切勿!切勿!添加联系方式以免受骗。
  • 原创转载:https://www.playezu.com/516319.html
    转载说明: 点我前往阅读>>>
匿名

发表评论

匿名网友
确定