专栏首页小码农学习笔记Vue 面试官问:前端路由原理
原创

Vue 面试官问:前端路由原理

前端路由原理

两种路由模式

vue-router 有两种路由模式,分别是:

  • hash
  • H5 history

其中,H5 history 模式需要后端的支持。

hash 模式

网页 url 组成部分

首先需要知道网页 url 组成部分,以及如何通过 JS 去获取各部分。

// http://127.0.0.1:7777/vue-router.html?a=100&b=20#/aaa/bbb
location.protocol  // 'http:'
location.hostname  // '127.0.0.1'
location.host      // '127.0.0.1:7777'
location.port      // '7777'
location.pathname  // '/vue-router.html'
location.search    // '?a=100&b=20'
location.hash      // '#/aaa/bbb'

hash 模式的特点

  • hash 变化会触发网页跳转,即浏览器的前进、后退
  • hash 变化不会刷新页面,这是 SPA 必需的特点
  • hash 永远不会提交到 server 端(前端自生自灭)

hash 模式的核心方法

hash 模式的实现原理

通过 hash 的变化触发路由的变化,从而触发视图的渲染。

下面演示的代码核心是三部分:

  • 监听 hash 变化
  • 页面初次加载,获取当前 hash
  • 点击按钮,通过 JS 修改 url 的 hash
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>hash 模式</title>
</head>
<body>
  <p>hash 模式</p>
  <button id="btn-hash">修改 hash</button>
</body>

<script>
  // 监听 hash 变化,有三种情况会触发:
  // a. JS 修改 url
  // b. 手动修改 url 的 hash(如果修改 url 的其它部分,可能会触发页面刷新)
  // c. 浏览器前进、后退
  window.onhashchange = (event) => {
    console.log('old url', event.oldURL)
    console.log('new url', event.newURL)

    console.log('hash:', location.hash)
  }

  // 页面初次加载,获取当前 hash
  document.addEventListener('DOMContentLoaded', () => {
    console.log('hash:', location.hash)
  })

  // 点击按钮,通过 JS 修改 url 的 hash
  document.getElementById('btn-hash').addEventListener('click', () => {
    location.href = '#/user'
  })
</script>
</html>

H5 history 模式

H5 history 模式的特点

H5 history 模式是用 url 规范的路由,但跳转时不刷新页面。

正常页面浏览:

  • https://github.com/xxx 刷新页面
  • https://github.com/xxx/yyy 刷新页面
  • https://github.com/xxx/yyy/zzz 刷新页面

改造成 H5 history 模式:

  • https://github.com/xxx 刷新页面
  • https://github.com/xxx/yyy 前端跳转,不刷新页面
  • https://github.com/xxx/yyy/zzz 前端跳转,不刷新页面

H5 history 模式的核心方法

H5 history 模式的实现原理

下面演示的代码核心是三部分:

  • 页面初次加载,获取当前 path
  • 点击按钮,通过 history.pushState 修改 url 的 hash
    • 第一个参数:state,无论何时,当通过浏览器前进、后退到达第三个参数配置的路由时,对应的该值就会携带过来
    • 第二个参数:一般传递空字符串
    • 第三个参数:目标路由的 path
  • 监听浏览器前进、后退
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>H5 history 模式</title>
</head>
<body>
  <p>H5 history 模式</p>
  <button id="btn-history">修改 url</button>
</body>

<script>
  // 页面初次加载,获取 path
  document.addEventListener('DOMContentLoaded', () => {
    console.log('load', location.pathname)
  })

  // 打开一个新的路由
  // 【注意】用 pushState 方式,浏览器不会刷新页面
  document.getElementById('btn-history').addEventListener('click', () => {
    const state = { name: 'page1' }
    console.log('切换路由到', 'page1')
    history.pushState(state, '', 'page1') // 重要!!
  })

  // 监听浏览器前进、后退
  window.onpopstate = (event) => { // 重要!!
    console.log('onpopstate', event.state, location.pathname)
  }
</script>
</html>

H5 history 模式需要 server 端配合,可参考后端配置例子。无论访问哪个路由,都返回 index.html 页面,再由前端通过 history.pushState 的方式触发路由的切换。


文章持续更新,本文 GitHub 前端修炼小册 已经收录,欢迎 Star。如对文章内容有不同见解,欢迎留言交流。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端开发:vue路由之前端路由的原理

    现在mvvm框架已经火的不成样了,React、Angular和Vue.js的发布让前端工程化成为主流,大前端时代已经到来了,最近接触了vue的前端路由,闲来无事...

    用户5827212
  • 前端路由原理

    对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理。

    wade
  • Vue 面试官问:模板编译原理

    使用 with 后,能改变 {} 内自由变量的查找方式:将 {} 内自由变量当作 obj 的属性来查找:

    文渊同学
  • 前端路由实现原理

    lilugirl
  • 前端路由简介以及vue-router实现原理

    简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。

    muwoo
  • 前端路由的实现原理

    路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。

    Daotin
  • 从后端到前端之Vue(五)小试路由

      一开始我还以为vue的路由只能用在工程化的项目里面呢,然后研究了一下才发现,在脚本化里面也是可以用的。其实呢不管在哪里用,把原理研究明白就对了。

    用户1174620
  • 深入分析Vue-Router原理,彻底看穿前端路由

    如今大前端的趋势下,你停下学习的脚步了吗?Vue3.0 都 Beta 了,但是还是感觉有些知识点云里雾里的,小编研究了一下Vue-Router源码整理和总结了一...

    小丑同学
  • 【面试需要-Vue全家桶】一文带你看透Vue前端路由

    掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

    达达前端
  • 前端路由的原理及应用

    早期的路由都是后端来实现的,根据用户访问的地址的不同,浏览器从服务器请求对应的资源或页面展示给用户。当页面数据量大,结构复杂的时候,随之造成服务器的压力也比较大...

    江米小枣
  • 前端路由跳转基本原理

    目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式,在路由切换时替换 DOM Tree 中最小修改的部分 DOM,来减少原先因...

    前端下午茶
  • 手写Vue-router核心原理,再也不怕面试官问我Vue-router原理

    在 Web 前端单页应用 SPA(Single Page Application)中,路由描述的是 URL 与 UI 之间的映射关系,这种映射是单向的,即 UR...

    秋风的笔记
  • 前端路由原理解析和实现

    路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。

    ConardLi
  • 【前端面考面试官系列】入门Vue全家桶

    达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装。

    达达前端
  • 太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

    一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。

    闰土大叔
  • 如何在Vue面试环节,证明自己值月薪15K?

    回想一下,自己平时面试的坐姿,你在面试官眼里,大概是什么形象,可能是工程师,也可能是键盘侠,或者找麻烦的。

    闰土大叔
  • 从 Prompt 来看微前端路由劫持原理

    在结合微前端框架 icestark 使用时,跳转到同一微应用的其他路由,会产生异常的效果:Prompt 弹窗了两次。

    coder_koala
  • 前端HTML5面试官和应试者一问一答

    form特性在HTML5中,可以把从属于表单的元素放在任何地方,然后指定该元素的form特性值为表单的id,该元素就从属于表单。

    达达前端
  • 现在前端都会Vue,你凭什么张口就要18K

    这几年前端圈面试流行一个段子,说能不能拿到高薪,就看能不能唬住面试官,唬住就要50K,唬不住就要5K。

    闰土大叔

扫码关注云+社区

领取腾讯云代金券