vue-router的两种模式的区别

本文探讨了Vue.js中两种路由模式:hash模式和history模式的区别。hash模式利用hashchange事件实现前端路由,适用于简单的单页应用。history模式通过history API提供更灵活的路由管理,但需要后端支持以避免404错误。

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

众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。

hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){

    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;

}

上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度上说明了原理。

更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。

网易云音乐,百度网盘就采用了hash路由,看起来就是这个样子:

http://music.163.com/#/friend
https://pan.baidu.com/disk/home#list/vmode=list

history路由

随着history api的到来,前端路由开始进化了,前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由

history api可以分为两大部分,切换和修改,参考MDN

切换历史状态

包括back,forward,go三个方法,对应浏览器的前进,后退,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适):

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

history.pushState({color:'red'}, 'red', 'red'})

window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}

history.back();

history.forward();

通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

history模式怕啥

通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕刷新f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。

在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

所以,如果你想在github.io上搭一个单页博客,就应该选择hash模式。比如这个博客

### Vue Router两种路由模式 #### 1. Hash 模式 Hash 模式的 URL 特征是以 `#` 开头,例如:`http://example.com/#/about`。这种模式利用了浏览器地址栏中的哈希部分(即 `#` 后面的内容),而不会触发页面刷新。当用户访问带有哈希的 URL 时,浏览器会将哈希后的路径视为锚点,并将其存储在历史记录中[^1]。 ##### 实现方式 在 Vue Router 中启用 Hash 模式非常简单,只需创建实例时不指定任何特殊配置即可,因为这是默认模式。以下是示例代码: ```javascript import { createRouter, createWebHashHistory } from 'vue-router'; const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHashHistory(), routes, }); ``` 这种方式通过监听哈希的变化来更新视图,无需服务端支持,因此适合大多数场景下的开发环境测试[^2]。 #### 2. History 模式 相比之下,History 模式的 URL 更加简洁美观,因为它不包含 `#` 符号,例如:`http://example.com/about`。该模式依赖于 HTML5 提供的 History API (`pushState`, `replaceState`) 来完成 URL 跳转而不重新加载整个页面[^3]。 然而,在使用 History 模式时需要注意服务器配置问题。由于每次跳转会请求实际存在的资源文件,如果服务器未正确设置,则可能导致 404 错误发生。所以通常需要对后端进行额外调整以便能够捕获所有未知路径并返回前端入口文件(index.html)。 ##### 实现方式 为了开启 History 模式,需显式调用 `createWebHistory()` 方法替代默认的 `createWebHashHistory()`. 下面是一个简单的例子展示如何定义基于 History 模式的路由器: ```javascript import { createRouter, createWebHistory } from 'vue-router'; // 定义一些路由组件... const routes = [{path:'/foo',component:Foocomponent},{path:'/bar',component:Barchart}] export default new createRouter({ mode:'history', history:createWebHistory(), routes // (缩写) 相同于 routes: routes }) ``` 上述脚本片段展示了如何切换到更现代且用户体验更好的URL结构的同时保持单页应用程序的功能特性. --- ### 总结对比表 | **属性** | **Hash Mode** | **History Mode** | |------------------|---------------------------------------|----------------------------------------| | **URL 形式** | 包含 `#` | 不含 `#` | | **兼容性** | 所有主流浏览器 | 需要HTML5支持 | | **SEO 友好度** | 较低 | 较高 | | **服务器需求** | 无 | 需要特定配置 | ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值