Vue 前端路由工作原理hash与history的区别

目录
  • 什么是路由？
  • vue-router的工作原理
    • 1.mode：'hash',在URL中会多'#'
    • 2.mode:'history'

什么是路由？

路由分两种：

  • 前端路由：Hash 地址与组件之间的对应关系
  • 后端路由：浏览器 请求地址+请求方式 与 后端 业务逻辑 之间的一个映射关系

SPA与前端路由：

SPA (单页面应用，全称为：Single-page Web applications) 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成，此时，不同组件之间的切换需要通过前端路由来实现

vue-router的工作原理

vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：

  • 利用URL中的hash（“#”）
  • 利用History interface在 HTML5中新增的方法

在vue-router中，它提供了mode参数来决定采用哪一种方式 mode参数：

  • 默认hash
  • 手动设置为history

router/index.js文件代码

那么，两者的区别是什么呢？

1.mode：'hash',在URL中会多'#'

  • vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL,当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值称为hash值。
  • 路由的hash模式是利用了window可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP 请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash 模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

2.mode:'history'

  • 当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

到此这篇关于Vue 前端路由工作原理hash与history的区别的文章就介绍到这了,更多相关Vue hash与history内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3纯前端实现Vue路由权限的方法详解

    Vue3纯前端实现Vue路由权限的方法详解

    目录 前言 RBAC模型 代码实现 登录 菜单信息 动态路由筛选 总结 前言 在开发管理后台时,都会存在多个角色登录,登录成功后,不同的角色会展示不同的菜单路由.这就是我们通常所说的动态路由权限,实现路由权限的方案有多种,比较常用的是由前端使用addRoutes(V3版本改成了addRoute)动态挂载路由和服务端返回可访问的路由菜单这两种.今天主要是从前端角度,实现路由权限的功能. RBAC模型 前端实现路由权限主要是基于RBAC模型. RBAC(Role-Based Access Contr

  • Vue Element前端应用开发之动态菜单和路由的关联处理

    Vue Element前端应用开发之动态菜单和路由的关联处理

    概述 在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图标.顺序.URL连接等相关信息,对于VUE+Element 前端应用来说,应该原理上差不多,本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理,实现动态菜单的维护和展示的处理. 1.菜单和路由的处理过程 由于Vue前端还需要引入路由这个概念,路由是我们前端可以访问到的对应路径集合,路由定

  • vue路由守卫,限制前端页面访问权限的例子

    今天给大家写一篇关于vue校验登录状态,如果是非法登录就跳转到登录页面的逻辑 首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下: router.beforeEach((to, from, next) => { next() }) beforeEach函数有三个参数: to:即将进入的路由对象 from:当前导航即将离开的路由 next,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的):否则为false,终止导航. 使用案例 限制登陆功能,具

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

  • vue-router 前端路由之路由传值的方式详解

    路由传值 在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: 1.通过localStorage setItem() getItem() 2.通过search(地址栏 ? 后面的参数) VueRouter的路由传值 VueRouter的路由传值有两种方式 jquery传值. 类似get传值 传值的路由 this.$router.push({

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

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

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

  • 从vue-router看前端路由的两种实现

    随着前端应用的业务功能越来越复杂.用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式.大型单页应用最显著特点之一就是采用前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图. "更新视图但不重新请求页面"是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有两种方式: 利用URL中的hash("#") 利用History interface在 HTML5中新增的方法 vue-router是Vue.js框架的路由插件,下

  • vue-router中的hash和history两种模式的区别

    众所周知,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 = has

  • vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截）

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个

随机推荐