vue Router在新标签打开页面的实践

先介绍一下背景

对于前面的啰嗦不喜欢看的同学可以直接跳转到后面“实现方案”去看结果。

2107年底借着公司一个内部系统前端重构的基础，引入了vue及ElementUI框架重新了系统前端。但是熟悉Vue框架的同学都知道我们默认使用vue-cli新建的带vue Router的webpack项目模板是单页面应用（spa），可是系统做好以后遇到了一个问题，例如A页面的的数据是根据搜索条件检索的结果，结果渲染到页面后通过点击其中一条的详情按钮跳转到最新的详情页面，这个时候当前页面就会被刷新渲染成详情页面，如果返回，正常情况是返回到检索页面的默认情况，可是用户需求是保留之前的搜索结果。毕竟有可能用户一天要查看多次检索结果的详情，总不能每次返回都让用户手动检索一遍吧。于是，最初的思路诞生了。

Vue Router打开新标签

搜索如果使用Vue Router 打开新标签。中文搜索情况下国内论坛搜不到靠谱办法的时候，尝试google “vue Router open new tab”。得到的结果也知道能是这样

参见这里

不过也有答案提示使用window.open实现，于是乎，最后我的初步实现方案就成了下面这样

将参数序列化后缀在URL后面通过window.open打开新标签。初步，这个需求也算是这样解决了。不过，对于喜欢研究的人来说，这么初步解决确实不是一个很能服帖的。

页面切换保留搜索状态

于是，第二个念头就这样冒出来了，毕竟，单页面应用能解决的需求不一定非要多页面去解决嘛。如果我这次在你跳转详情之前记录下来。等你下次返回的时候自动把上次的搜索结果直接展示给你，这样省的用户再次输入搜索条件来进行搜索岂不完美解决需求了吗？哈哈哈，哎呀，我不得不为我的聪慧而小小的骄傲一把。

于是把这个想法跟产品经理简单商讨一下以后对方也表示，你如果能实现保留前面搜索结果的话，那么新标签的打开也似乎就没有必要了。

于是开始了第二次搜索之路。如何保留表单输入历史，vue Router多页面切换保留前面输入记录等搜索结果下，我得到了一个基本统一的建议：Vuex。Vuex是官方推出的状态管理工具，相信熟悉Vue的同学自然知道其用法。而且中文文档也非常详尽。我这里就不班门弄斧的解释了。

最后的结果就是使用Vuex做了一个搜索状态的持久保持module，在每次进入希望保存状态的时候提前保存，每次返回的时候自动取回数据填充并且自动执行搜索，这样只要网络顺畅的前提下，用户返回的时候即可看到之前的搜索结果。美哉美哉。

但是，马上问题又出来了。

同页面多个搜索记录需要传递该怎么办

在这个功能上线不久，有一次新需求改的时候测试反馈了一个问题，首页通过XXX搜索的功能取消了吗，为什么现在不能自动搜索？

查了一下，原来系统有做一个首页快捷搜索的功能。即我在首页输入了快捷搜索参数点击搜索页面自动跳转到搜索结果页面并且输入前一个页面输入的值并且自动执行搜索结果。这部分传参都不是问题vue Router都支持，可是问题是，我前面还有保存了一份搜索条件的呀。这样进入搜索表单页面岂不是混了之前输入的值，那肯定得不到期望的搜索结果。

这要是单独配置路由的判定去执行似乎越改越麻烦了，还不如回归当初打开新标签呢。

于是，今天发呆的时候想到了一个办法，我能不能做一个配置项，在默认的情况下系统是单页面系统，一旦打开配置那么随后路由的切换将直接打开新标签呢？

解决方案

啊哈，我真的是感觉自己聪明（老脸一红）。

瞬间思路泉涌：

当当当当。

代码如下：

于是这样我就开心的完成了我的设计，默认进来系统是单页面应用，用户按下control键以后系统提示您当前切换到了多页面模式，那么随后打开的页面将都是多页面，并且所以可以通过按下control来关闭该模式。

写在最后，遇到的问题

问题1.直接做页面跳转，新开的标签页自然就打开我们想打开的内容页，但同时老页面如果不做next回调上的处理也会跳到目标页面，怎么处理这个问题呢？

加hash，从示例代码可以看到如果增加了hash那么在新打开的页面就会在路径最后面额外增加一个new的hash，这个hash可以随意取，我们只需要在路由守卫里面判定是否有这个hash，就能知道当前页面是新开页面还是老页面，然后老页面next(false)组织跳转，新页面放行。完美解决。

问题2.这样首次打开的页面由于没有hash则会默认组织加载那么正常的请求又会被拦截该怎么办呢？

别忘了，系统默认是单页面应用，正常打开初始化的时候，$isBlank=flase，所以默认会next()放行。所以这么问题也能自动迎刃而解。

问题3.这么做产品经理能接受吗？

好吧，这个问题我不知道，我问了产品经理，她貌似有点火气今天没告诉我答案，最后能不能接受，等我更新吧。（逃）