Vue Router路由hash模式与history模式详细介绍

目录
  • 一、前言
  • 二、hash模式
  • 三、history模式

一、前言

对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。

vue脚手架搭建的项目的路由默认是hash模式。

hash模式：

创建路由实例时，添加mode:"history"属性，即可使用history模式。

const router = new VueRouter({
  routes,
  mode: "history"
})

history模式：

二、hash模式

最开始学习超链接a时，就可以利用锚点”#”实现跳转到同一页面的不同id所对应的位置。我们知道vue是单页面应用，所以很符号使用锚点实现路由。

打开vue官网，点击 “vuejs是什么目录”：

可以看到地址栏，是带#的，所以是hash模式：

打开控制台，输入window.location(包含了浏览器地址栏的地址信息):

路由的哈希模式其实是利用了window.onhashchange事件，也就是哈希值（#后面的值）如果有变化，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，这样能够找到对应页面进行加载。

三、history模式

使用hash模式完全可以实现路由的功能，但是，地址栏带"#号"，让人感觉不太正常。而且有的时候分享页面到某些app时，有的app里面url是不允许带有#号的。所以需要使用history模式，去掉“#号”。

前面知道了hash模式是观察window.location.hash的变化来改变路由的。

而HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面。

每个window窗口都有持有自己的history，为了安全起见history不会暴露访问过的URL，但是可以通过API进行前进或后退访问URL的内容

1、 window.history.pushState(data, title, targetURL);

@状态对象：传给目标路由的信息,可为空

@页面标题：目前所有浏览器都不支持,填空字符串即可

@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

2、window.history.replaceState(data, title, targetURL);@类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录。

3、popstate事件，回退，与pushState作用相反。

通俗地说就是浏览器的地址栏url信息存储在了window.history.state中，但是调试时我们发现，其为null，是为了防止网页获取你的历史浏览地址，所以给隐藏了，但是其内部可以获取。

举一个例子，立马就明白了：

打开百度，搜索“CSDN”:

然后我们打开控制台，输入：

window.history.replaceState(null, 'title', 'https://www.baidu.com/')

效果：

地址栏变成了百度首页的地址，但是并不影响当前页面的内容。这也就是history模式下vue单页面实现不同路由显示的原理，程序中路由改变时，将路由地址显示在地址栏，然后根据路由对应的地址显示组件就行了，此时并没有重新请求服务器，但是地址栏确改变了，给用户造成了页面跳转的假象。然而，我们知道，vue项目中，我们一直都在index.html中。

但是，同时也暴露了history一个问题，就如上面的例子，如果我将地址栏替换为"https://www.baidu.com/"后，刷新页面，肯定会跳转到百度首页的，因为刷新会重新请求服务器的。然而实际应用中，vue中的路由地址并没有在服务器上有对应的后端处理，它仅仅用于前端的路由切换。

那么如何解决呢？这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html）。

所以相比于hash，history虽然可以实现正常美观的地址显示，但是代价就是需要解决刷新时请求服务器的404的问题。

到此这篇关于Vue Router路由hash模式与history模式详细介绍的文章就介绍到这了,更多相关Vue hash history内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-router中关于children的使用方法

    vue-router中关于children的使用方法

    目录 关于children的使用 children的使用场景 router配置中children配置不起作用 关于children的使用 children的使用场景 比如页面左侧显示菜单,右侧显示不同菜单下的内容,类似如下element网站,那么右侧部分的内容就是当前页面的children 存在如下场景,点击导航一跳转至页面1,导航二跳转页面2,且页面1中存在子页面 路由js如下: const routes = [{ path: '/', name: 'Home', component: Hom

  • Vue Router深扒实现原理

    目录 回顾Vue Router的核心代码 代码实现 创建Vue-Router插件 构造函数 完整代码 Vue Router官网 前置知识:插件.slot插槽.mixins混入.render函数.运行时和完整版的Vue 回顾Vue Router的核心代码 // 注册插件 // Vue.use() 内部调用传入对象的 install 方法 Vue.use(VueRouter) // 创建路由对象 const router = new VueRouter({ routes: [ { name: 'ho

  • 关于VueRouter导入的全过程

    目录 router nanoid的使用 引入 使用 路由 1-1 安装依赖 1-2 引入 1-3 在main.js中使用 1-4 App.vue 全局过滤器 element-ui 全局组件 Vuc-cli中的视配 1-1 安装依赖 1-2 配置文件 1-3 main.js 1-4 public/index.html 1-5 在pc端视配 slot封装动画 项目初始化 1-1 .router-link-active 1-2 动态显示tabbar 1-3 跳转回前一个页面 1-4轮播 vant ui

  • Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    目录 简介 问题复现 代码 测试 解决方案 方案1:导航守卫 方案2:watch监听$route 方案3:父组件router-view指定key 其他网址 简介 说明 本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题. 多路由复用同一组件的场景 多路由使用同一组件 比如:添加博客(path为:/addBlog)和编辑博客(path为:/editBlog)都对应同一个组件(EditBlog.vue) 动态路由 比如:用户详情页采用动态路由,其path为:/user/:id,组件都是User

  • Vue--Router动态路由的用法示例详解

    目录 官网网址 动态路由概述 同一路由多个参数 path-to-regexp Api用法 1. pathToRegexp() 2.exec() 3. parse() 4. compile() 本文介绍Vue-Router中动态路由的用法. 官网网址 Vue官网:带参数的动态路由匹配 | Vue Router 动态路由概述 说明 很多时候,我们需要将给定匹配模式的路由映射到同一个组件.例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同.在 Vue Router 中,

  • vue-router后台鉴权流程实现

    目录 前言: 路由拦截鉴权常用的两种方法 比较: 与动态路由相关的通常有以下几个文件: router.js permission.js store.js 退出登录: 结尾: 前言: 最近项目遇到一个管理系统,感觉权限配置挺有意思,记录一下流程实现的过程,便于自己学习以及整理思路,部分思路整合在代码的注释中: 路由拦截鉴权常用的两种方法 路由拦截:单纯给路由加字段标识符,通过路由拦截实现动态路由:第二种是通过路由的拆分另外需要后端的配合去实现的动态路由配置 比较: 路由拦截实现方式比较简单,只需要

  • Vue Router路由hash模式与history模式详细介绍

    Vue Router路由hash模式与history模式详细介绍

    目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认是hash模式. hash模式: 创建路由实例时,添加mode:"history"属性,即可使用history模式. const router = new VueRouter({ routes, mode: "history" }) history模式: 二.hash模

  • Vue-router中hash模式与history模式的区别详解

    Vue-router中hash模式与history模式的区别详解

    VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,这个题其实就是考验你的开发经验是否属实. 小白回答:hash模式url带#号,history模式不带#号. 大牛解答: 形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式.如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传: 功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个

  • vue前端路由以及vue-router两种模式实例详解

    vue前端路由以及vue-router两种模式实例详解

    目录 前言 1.什么是前端路由 (1)后端路由阶段 (2)前后端分离路由阶段 (3)单页面应用阶段 2.vue-router提供了hash和history两种路由模式 (1)hash模式 (2)history模式 (3)两种模式的比较 补充:路由模式解析 总结 前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 1.什么是前端路由 (1)后端路由阶段 早期的页面都是由html页面在

  • Vue前端路由hash与history差异深入了解

    Vue前端路由hash与history差异深入了解

    目录 前言 简单介绍 Vue Router Vue Router 实现原理 Hash 简述 特点 设置 history 简述 设置 特点 生产环境问题及解决 开发环境- historyApiFallback 总结 前言 没了解这两种路由前,不管是 vue还是 react 在项目创建时难免会进行路由之间选择,在 hash 和 history 难免会纠结一番,或者是直接稀里糊涂用了默认带 # 的 hash 路由,看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择.有疑问欢迎在评论区指出

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • 一文了解vue-router之hash模式和history模式

    当前版本: 3.0.3 类目录: src/history/base.js hash模式 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算).比如这个 URL: http://www.abc.com/#/hello ,hash 的值为 #/hello.它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面. history模式 利用了 HTML5 History Interface 中新增的

  • Vue-router 中hash模式和history模式的区别

    Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash";   mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向

  • vue-router中hash模式与history模式的区别

    vue-router中hash模式与history模式的区别

    vue-router有两种模式 hash模式 history模式 1.单页面应用 单页应用 1.只有一个html文件,整个网站的所有内容都在这一个html里,通过js来处理 2.不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的.为了实现单页应用 ==> 前后端分离 + 前端路由.(更新视图但不重新请求页面) 前端路由 实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,加载不同的组件,然后动态的渲染出区域 html 内容. 优点 良好的交互体验,用户不需要刷新页面,页面显示流畅,

  • Vue3实战学习配置使用vue router路由步骤示例

    Vue3实战学习配置使用vue router路由步骤示例

    目录 引言 一.目录结构 二.版本依赖 三.配置路由 四.使用路由 引言 随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-router在Vue3中的配置和使用. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ views/ home.vue list.vue ro

  • 解决vue+router路由跳转不起作用的一项原因

    如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:'history',

随机推荐