1.Vue-router的两种模式

最新推荐文章于 2025-03-13 09:31:22 发布

可爱的黑山样

最新推荐文章于 2025-03-13 09:31:22 发布

阅读量671

点赞数

分类专栏： Vue-router 文章标签： vue hash js

本文链接：https://blog.youkuaiyun.com/qq_42275614/article/details/107977628

版权

Vue-router 专栏收录该内容

2 篇文章

订阅专栏

Vue-router作为前端路由管理器，提供了两种模式：Hash和History。Hash模式通过#来改变URL，不向服务器请求，适合不支持History API的浏览器。而History模式则可以自定义路由路径，需要服务器配置，避免404错误。本文探讨这两种模式的差异及如何在vue-router.js中操作历史状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    首先，理解几个概念：

路由
通过不同URL可以访问到不同内容（资源）或页面；
前端路由
不向后端发送请求，不刷新页面，前后端分离，即响应不同页面内容的工作由前端负责。在多视图单页web应用(SPA)普遍使用；

    前端路由优点不言而喻，不需要每次都从服务器全部获取资源，能够快速展现给用户；
    缺点就是使用浏览器的前进或者后退按键时，不能合理利用缓存资源；

后端路由
会向后端发送请求，会刷新页面，前后端不能分离。浏览器在地址栏中切换不同的url（或者刷新页面），都会向后台服务器发出请求，服务器响应请求，返回相应页面内容。比如php中前端通过模块化url路径请求后端。

Vue-router有两种路由模式——History和Hash，属于前端路由。

Hash模式（Vue-router默认模式）

参考的文档版本：vue-router v3.4.2
形式：#+hash值

    1. 定义了三个组件component；
    2. 定义了三个路由，分别映射到一个组件；
    3. 创建router实例并挂载到根实例；

图片描述
点击上面不同的链接，url中#之后的内容会产生相应变化。每次 hash 值发生变化时，就会触发hashchange 这个事件，然后进行相应处理。虽然不同hash值会出现在url中，但不会包括在HTTP请求中，即不会重载界面。

    //通过addEventListener添加hashchange事件监听器  
    window.addEventListener("hashchange", myFun, false);

代码第2613行 添加了hashchange事件监听，处理函数是handleRoutingEvent。

History

hash模式只能改变#后面的url片段，history则完全可以自定义路由路径，因此需要服务端对每一个可能的path值都作相应的映射，不然很容易出现404。浏览器刷新时，需要重定向到根页面。

主要内容：切换+修改

切换历史状态
三种方法：back forward go

    history.back(); //后退
    history.back(); //前进
    history.go(1); //前进一次
    history.go(-1); //后退一次

修改历史状态
两种方法：pushState()和replaceState()

vue-router.js

    //代码在第2814行
    //根据不同的mode创建不同history对象
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base);
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback);
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base);
        break
      default:
        {
          assert(false, ("invalid mode: " + mode));
        }
    }

HashHistory中有两个方法：HashHistory.push()和HashHistory.replace()。前者将新路由添加到浏览器访问历史的栈顶，后者将当前路由替换掉栈顶路由。

$router与$route的区别?

    1.route是当前正在跳转的路由对象，可以从里面获取name、path、query、params等；
    2.router为VueRouter的实例，是一个全局的路由器对象；

两种模式的区别

    1. history设置的新url可以是与当前url同源的任意值；hash只可修改 # 后面的部分，实质上是同文档的url；
    2. history设置的新url可以与当前url相同，依然会把记录添加到栈中；hash必须不一样才会添加；
    3. history通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串；
    4.history可额外设置title属性；