Vue-router

前置:单页应用最显著特点之一就是采用的前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。

更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:

  1、利用URL中的hash("#");

  2、利用History interface在HTML5中新增的方法;

一、hashHistory

通过(1)HashHistory.push()

       (2)HashHistory.replace()

       (3)监听地址栏

用户还可以直接在浏览器地址栏中输入改变路由,因此还需要监听浏览器地址栏中路由的变化 ,并具有与通过代码调用相同的响应行为,在HashHistory中这一功能通过setupListeners监hashchange

二、HTML5History

从HTML5开始,History interface提供了2个新的方法:

        (1)pushState()

        (2)replaceState()

使得我们可以对浏览器历史记录栈进行修改

--------------------------------------------------------------------------------------------------------------------------------------

详见:https://segmentfault.com/a/1190000014822765

           https://www.jianshu.com/p/f8699194ce26

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 介绍 vue-router是一个vue插件。其实质是在location.hash、location.replace...
    AmazRan阅读 5,472评论 0 6
  • 一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用 标签编写链接哪?...
    浪里行舟阅读 67,843评论 12 203
  • 用Vue.js + vue-router创建单页应用,是非常简单的,基本是这样的: 组件 → 路由 → 渲染地方 ...
    阿go阅读 5,203评论 0 0
  • 编程式导航 1 .用在可复用的路由视图里面,比如所有的需要跳转到一个文章具体内容的路由,每一次跳转到新路由的时候,...
    skoll阅读 3,836评论 0 1
  • 官网文档,....., 下面这种路由表的写法比较优雅,我把路由单独写在一个文件routes.js . router...
    Searchen阅读 94,366评论 1 54