聊一聊|聊一聊 Vue 项目的「深链方案」聊一聊Vue项目的「深链方案」

阅读时间约 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

方案输出什么是 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 与页面状态双向绑定

2020-01-10 19.49.35.gif
方案对比已经有的稍微成型的方案 vuex-router-sync 略微有 vm data 和 url 的双向绑定概念但仅仅完成了数据的初始化部分, 连 vm data 单向同步到 url 的操作都没有完成.
【聊一聊|聊一聊 Vue 项目的「深链方案」】目前并没有更可靠的开源方案可以对比, 因此仅仅选取vuex-router-sync 方案进行对比.

对比纬度	vue-route-sync-mixin	vuex-router-sync
学习成本	?? 开箱即用	? 需要学习 vuex 的 submodule
外部依赖	?vue+vue-router	?vue+vue-router+vuex
代码侵入性	?不污染全局, 不污染 dom 节点	?需要全局配置
可用性	? 有 demo, 文档可用, 测试数据优秀	?demo 不可用,文档简陋,无测试