阅读时间 约 8min. 关注最终方案请点击目录 => 方案输出
什么是深链
深链(深度链接, DeepLinking) 在互联网的语境中的含义是指: 使用超链接,链接到一个特定的、通常可搜索的或索引的网站内容 ( 例如: http://example.com/path/page )，而不是网站的主页( 例如: http://example.com ).
深度链接方案在移动互联网时代发光发热, 有非常多的应用场景, 也已经养成了深刻的用户习惯.
具体的使用场景
- 今日 X 条邀请用户链接, 被邀请者点击打开链接就能看到发起的邀请用户姓名
- 手机网页点击新闻链接, 直接打开腾X 新闻 App 的新闻页面
- 淘 X app 用户商品分享
- 淘 X 用户 A 分享商品到微 X app, 实际生成的并非 url 而是一段乱码文本
- 在微 X app发送了乱码文本
- 淘 X 用户 B 复制这段乱码文本, 并打开淘 X app
- 直接定位到用户 A 分享的商品
Google 的深链实践
如下 GIF 是谷歌页面状态持久化到 URL 上的演示
- 拷贝关键字"字节跳动"搜索结果的第 5 页面容的 url
- 重新打开这段 url
-
新打开的页面正确现实关键字"字节跳动"与第 5 页搜索结果
2020-01-09 18.52.22.gif
深度链接能解决什么问题
- 有利于 SEO 优化, 增加网站的曝光率
- 有利于传播, 商业价值极高 (在各种营销场景发光发热)
- 破除多端壁垒, 增加入口渠道, 商业价值极高 (移动互联网抢占入口时代脱颖而出的方案)
- 点击链接, 一键直达, 减少用户操作步骤, 带来非凡用户体验
Deep linking - Wikipedia
深度链接的起源与发展 (知乎介绍文章, 没有深入考究): Universal Link & Deep Link
深度链接在 vue 中的应用与优化
在过去非单页面应用的时代, 单个页面可交互的操作不多, 页面状态的转换基本要靠路由跳转, 重新加载新页面完成. 我们可以认为页面状态和 url 是绑定关系.
而在单页面应用时代, 单页面应用的页面状态是随时发生变化的, 但 URL 不是. URL 的状态靠页面逻辑进行维护.
在当下各种单页面应用中, 前端 Router 方案就是一种深链方案的实现, 覆盖了大部分应用的场景.
然而有一个问题是 Router 组件没有解决的问题, Router 的颗粒度还是太粗糙了, 只能做到页面组件的级别, 不能做到更精细的控制页面的状态持久化, 并且不能做到页面状态和 url 同步更新.
深度链接在单页面应用语境下的含义必然要有一个更高层次的要求:
- 超链接打开单页面应用特定路由页面的特定状态
- 页面 URL 和单页面应用页面状态双向绑定
在 vue 项目中进行抽象过程
实际 Vue 项目开发过程中, 我们或多或少, 都接触过类似的功能开发:
1. 通过跳转到一个新的 url 改变页面的状态 (跳转新路由, 非常普遍的操作)
2. 从 url 获取页面的初始化状态 (获取单据号码)
3. 监听数据变化, 从将页面状态写入 url (这个不常见, 但在有分享要求的页面必然遇到)
我认识到这些特性就是深链方案的实现, 或者深链方案的子集实现. 因此希望对这部分逻辑进行抽象封装.
当前基于 Vue 前端框架进行开发实现, 更快实现, 更契合团队业务.
具体抽象逻辑如下
| 抽象逻辑 | 初始化 | 页面状态更新 | URL 更新 |
|---|---|---|---|
| 文字描述 | 1. 以 URL 数据优先, 初始化 VM | 页面状态回写 URL | 从 URL 同步数据到 VM |
| 2. 以 VM 的当前的数据校准 URL | |||
| 难点 | 1. 避免页面状态和 URL 循环更新 | ||
| 2. 在 url 上保持正确的数据类型 | |||
| 时序图 | image.png
|
image.png
|
image.png
|
<span id="output">方案输出</span>
什么是 vue-route-sync-mixin
vue-route-sync-mixin 是基于 vue 和 vue-router 的深链方案实现, 它使用一种简单直接的手段完成 URL 和 VM data 之间的 双向绑定, 让它们实时进行同步.
它看起来实在太棒了, 让我们实时同步页面的状态到 URL 上, 让我们可以随时分享关键词 "teeeemoji" 的第四页搜索结果给我们的朋友.
特性
- 实现 url & vm data 的双向绑定, 实时同步, 这真是太令人兴奋了
- 对遗留项目逻辑和组件的非侵入性, 影响范围极小
- 支持所有的 JS 基础数据类型, 以及 Object 以及 Array
- 简简单单配置, 快快乐乐使用
- 只基于 Vue 和 Vue-router, 难道你不打算使用它们吗?
- 单元测试代码覆盖率 > 90%
- 更多的新特性期待你的关注与支持 ~
Demo 展示
vue-route-sync-mixin URL 与页面状态双向绑定
方案对比
已经有的稍微成型的方案 vuex-router-sync 略微有 vm data 和 url 的双向绑定概念但仅仅完成了数据的初始化部分, 连 vm data 单向同步到 url 的操作都没有完成.
目前并没有更可靠的开源方案可以对比, 因此仅仅选取vuex-router-sync 方案进行对比.
| 对比纬度 | vue-route-sync-mixin | vuex-router-sync |
|---|---|---|
| 学习成本 | ︎✅ 开箱即用 | ❌ 需要学习 vuex 的 submodule |
| 外部依赖 | ✅vue+vue-router | ❌vue+vue-router+vuex |
| 代码侵入性 | ✅不污染全局, 不污染 dom 节点 | ❌需要全局配置 |
| 可用性 | ✅ 有 demo, 文档可用, 测试数据优秀 | ❌demo 不可用,文档简陋,无测试 |
