50+Vue经典面试题源码级详解(47):History模式和Hash模式有何区别?

·  阅读 3476
50+Vue经典面试题源码级详解(47):History模式和Hash模式有何区别?

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第24天,点击查看活动详情

前言

小伙伴们好,这是村长《Vue经典面试题源码级详解》系列文章第 47 题,前面已完成题目合集在此: 历时一个月,2.6W字!50+Vue经典面试题源码级详解,你值得收藏!

学习群

我组织了一个面试学习群,关注村长公众号村长学前端,回复“加群”,大家一起卷~

相关学习资源

本系列有配套视频思维导图开源项目,大家学习同时千万不要忘了三连 + 关注 + 分享,有道是喝水不忘挖井人~

History模式和Hash模式有何区别?

分析

vue-router有3个模式,其中两个更为常用,那便是history和hash。

两者差别主要在显示形式和部署上。


体验

vue-router4.x中设置模式已经变化:

const router = createRouter({
  history: createWebHashHistory(), // hash模式
  history: createWebHistory(),     // history模式
})
复制代码

用起来一模一样

<router-link to="/about">Go to About</router-link>
复制代码

区别只在url形式

// hash
// 浏览器里的形态:http://xx.com/#/about
// history
// 浏览器里的形态:http://xx.com/about
复制代码

思路

  • 区别
  • 详细阐述
  • 实现

回答范例

  • vue-router有3个模式,其中history和hash更为常用。两者差别主要在显示形式、seo和部署上。
  • hash模式在地址栏显示的时候是已哈希的形式:#/xxx,这种方式使用和部署简单,但是不会被搜索引擎处理,seo有问题;history模式则建议用在大部分web项目上,但是它要求应用在部署时做特殊配置,服务器需要做回退处理,否则会出现刷新页面404的问题。
  • 底层实现上其实hash是一种特殊的history实现。

知其所以然

hash是一种特殊的history实现:

github1s.com/vuejs/route…

分类:
前端
收藏成功!
已添加到「」, 点击更改