前言
在实现URL与视图双向数据绑定之前,有必要了解下网络链接分类
链接，又称超文本链接，它是指使用超文本制作语言编辑包含标记指令的文本文件，在两个不同的文档或同一文档的不同部分建立联系，从而使访问者可以通过一个网址访问不同网址的文件，或通过一个特定的栏目访问同一站点上的其它栏目。 链接依据不同的标准，可以分成不同的类型。如按照链接技术的不同，可以将链接分为普通链接、纵深链接、埋置链接和加框链接；按照链接方式的不同，可以将链接分为协议链接、加密链接、自由链接与反向登录链接等。在这些链接中，链接的指向有三种：(1) 指向同一网页的特定内容；(2) 指向同一网站中不同网页的特定内容；(3) 指向不同网站中的特定内容。第三种指向又有两种情形，一种是指向不同网站的主页，称为外链，外链一般不发生侵权。另一种指向不同网站主页下的某一页面，称为内链，也称为深度链接(DeepLinking)，即绕过被链网站首页直接链接到分页的链接方式。当用户点击链接标志时，计算机就会自动绕过被链网站的首页，而跳到具体内容页。此时，如果具体内容页上没有任何被链网站的标志，那么用户可能会误以为还停留在设链网站内，会导致使用者对网站所有者的误判，容易引起侵权纠纷。 如图1所示，网站A中的页面3指向网站日主页的链接称为外链，用橙色虚线箭头表示。网站A中的页面3和页面2-1指向网站B的页面1的链接称为深度链接，用蓝色点划线箭头表示。
应用场景
音乐网站
音乐网站涉及的深层链接，以百度 MP3 搜索服务为例，用户在百度 MP3 中检索歌曲时，只要点击搜索结果列表中的歌曲标题，就能进行试听或相应下载， 整个试听及下载过程均能在百度 MP3 页面中进行，但被试听或下载的歌曲并非存在于百度的服务器中。
视频网站或聚合平台
视频网站或聚合平台主要涉及深层链接的播放模式为，设链者截取被链接网站的视频流在设链视频网站或视频聚合平台的播放器内直接播放，如百度被诉“盗链盗播”的理由便是，未经许可擅自通过百度视频、百度影音等软件，以定向链接、点对点传输、浏览器内嵌播放插件并主动推介等方式向公众提供视频的播放甚至下载，而相关视频并未存储在百度服务器之中。
内容聚合性 APP
内容聚合性 APP 只是一种时下流行的说法，本身并无严格的定义，其大致是指那些通过搜索引擎、数据挖掘、网络链接、转码等技术，将分散在网络空间的文件、视频等内容资源整合起来，使得用户能够通过一站式平台访问资源的网络服务。尽管有众多商业模式，但内容聚合性 APP 也可能涉及到一些深层链接技术，如时下争议较大的新闻聚合 APP“今日头条”，其涉及到深层链接的模式为：APP 抓取新闻信息源后，将新闻标题及新闻摘要进行展示，用户点击新闻标题后，新闻原文及图片仍然在 APP 端展示，未实现真正跳转，只有用户点击页面下方的“阅读原文”，方可跳转到被链新闻网页。
Google 的深链实践
如下 GIF 是谷歌页面状态持久化到 URL 上的演示
- 1. 拷贝关键字"字节跳动"搜索结果的第 5 页面容的 url
- 2. 重新打开这段 url
- 3. 新打开的页面正确现实关键字"字节跳动"与第 5 页搜索结果
方案输出
vue-route-sync-plugin是什么
vue-route-sync-plugin 是基于 vue 和 vue-router 的深链方案实现, 它使用一种简单直接的手段完成 URL 和 VM之间的 双向绑定, 让它们实时进行同步. 它看起来实在太棒了, 让我们实时同步页面的状态到 URL 上, 让我们可以随时分享关键词 "teeeemoji" 的第四页搜索结果给我们的朋友吧.
vue-route-sync-plugin的特性
- 1. 实现 url & vm data 的双向绑定, 实时同步, 这真是太令人兴奋了
- 2. 对遗留项目逻辑和组件的非侵入性, 影响范围极小
- 3. 支持所有的 JS 基础数据类型, 以及 Object 以及 Array
- 4. 简简单单配置, 快快乐乐使用
- 5. 只基于 Vue 和 Vue-router, 难道你不打算使用它们吗?
- 6. 单元测试代码覆盖率 > 90%
- 7. 更多的新特性期待你的关注与支持 ~
vue-route-sync-plugin的优点
- 1. 有利于 SEO 优化, 增加网站的曝光率
- 2. 有利于传播, 商业价值极高 (在各种营销场景发光发热)
- 3. 破除多端壁垒, 增加入口渠道, 商业价值极高 (移动互联网抢占入口时代脱颖而出的方案)
- 4. 点击链接, 一键直达, 减少用户操作步骤, 带来非凡用户体验
vue-route-sync-plugin的用法
+ $ npm install vue-route-sync-plugin -S
+ main.js
import {routerSyncPlugin} from 'vue-route-sync-plugin'
Vue.use(routerSyncPlugin.initPlugin({
ps:"pagination.pageSize",
pn:"pagination.pageNum"
}))
+ component
<script>
export default {
data() {
return {
pagination: {
pageSize: 10,
pageNum: 1
}
};
}
};
</script>
其他版本
vue-route-sync-plugin2
+ $ npm install vue-route-sync-plugin2 -S
+ main.js
import {routerSyncPlugin} from 'vue-route-sync-plugin2'
Vue.use(routerSyncPlugin)
+ component
<script>
export default {
data() {
return {
pagination: {
pageSize: 10,
pageNum: 1
},
routeSync: {
ps: "pagination.pageSize",
pn: "pagination.pageNum",
}
};
}
};
</script>
vue-route-sync-mixin
+ $ npm install vue-route-sync-mixin -S
+ component
<script>
import {createRouteSyncMixin} from 'vue-route-sync-mixin'
export default {
// initial url would be http://xxx/#/?ps=1__10&pn=1__1
mixins: [createRouteSyncMixin({ps: 'pagination.pageSize',pn: 'pagination.pageNum'})],
data() {
return {
pagination: {
pageSize: 10,
pageNum: 1
}
}
}
}
</script>
DEMO展示
方案对比
已经有的稍微成型的方案 vuex-router-sync 略微有 vm data 和 url 的双向绑定概念但仅仅完成了数据的初始化部分, 连 vm data 单向同步到 url 的操作都没有完成.
目前并没有更可靠的开源方案可以对比, 因此仅仅选取vuex-router-sync 方案进行对比.
| 对比纬度 | vue-route-sync-plugin | vuex-router-sync |
|---|---|---|
| 学习成本 | ☕ 开箱即用 | ⚠ 需要学习 vuex 的 submodule |
| 外部依赖 | ☕ vue+vue-router | ⚠ vue+vue-router+vuex |
| 代码侵入性 | ☕ 不污染全局, 不污染 dom 节点 | ⚠ 需要全局配置 |
| 可用性 | ☕ 有 demo, 文档可用, 测试数据优秀 | ⚠ 不可用,文档简陋,无测试 |
