美文网首页
vue路由的两种模式

vue路由的两种模式

作者: inspg | 来源:发表于2018-12-30 12:54 被阅读0次

hash与history      对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义。前端路由的核心,就在于——— 改变视图的同时不会向后端发出请求。

一、为了达到这个目的,浏览器提供了以下两种支持:

1、hash ——即地址栏URL中的#符号(此hsah 不是密码学里的散列运算)。          比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。

2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。(需要特定浏览器支持)            这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改是,虽然改变了当前的URL,但你浏览器不会立即向后端发送请求。          history模式,会出现404 的情况,需要后台配置。

二、404 错误

1、hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com, 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;

2、history模式下,前端的url必须和实际向后端发起请求的url 一致,如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理,将返回404错误。

相关文章

  • vue问题

    vue-router路由跳转有两种模式需要在mode属性填写用的模式,vue有两种模式history模式和hash...

  • Vue的两种路由模式

    在vue-router路由对象中,路由有两种模式:hash和history,而默认的是hash模式. hash路由...

  • Vue的两种路由模式

    在vue-router路由对象中,路由有两种模式: hash 和 history,而默认的是hash模式,hash...

  • vue-router

    vue传参两种方式 1、对象传参2、路径传参 vue路由两种模式 1、hash模式 onhashchange2、h...

  • vue面试题(第九天)

    1.Vue路由的实现原理 更新视图但不重新请求页面,是前端路由原理的核心之一 vue路由的实现有两种模式<1>ha...

  • 2019-06-23 Vue-Router中history与ha

    hash前端路由,无刷新history 会去请求接口 vue-router提供两种模式的原因: vue 是渐进...

  • vue-router中使用history模式时刷新页面无法正常渲

    问题描述 vue-router路由较为常见的模式有hash模式和history模式两种, 但是hash模式路径中带...

  • [PuffBook项目总结]使用Vue-router管理路由

    Vue-router 两种模式: Hash模式(默认,会转化为以#开头),History模式 路由在全家桶中的定位...

  • Vue路由模式

    为了构架单页面应用,需要引入前端的路由系统Vue-router。 路由有两种模式:hash、history,默认会...

  • 稍微学一下VueRouter原理

    博客原文 两种路由模式的基本原理 用过 vue-router 就知道它提供了两种模式,hash 和 history...

网友评论

      本文标题:vue路由的两种模式

      本文链接:https://www.haomeiwen.com/subject/ztrvlqtx.html