页面A=>B时，有什么办法能预先执行B的某个函数，执行完毕后再A=>B？

Question

我有2个页面，分别是A和B。点击A页面的某个按钮后，会跳转到B页面。
我想在点击按钮后，先加载B的某个函数，等待函数加载完毕后，再执行路由的跳转（A=>B）。
但问题是，只有A销毁后，进入B页面时才会开始加载函数。所以有什么办法能预先加载B的函数？

Answer 1

最终是靠CSS解决了。本来我的需求是：在A页面（首页）点击头像，进入B页面（用户详情页），两个页面间的头像是一串连贯的动画。

如果进入B页面后，重新用ajax、localstorage来获取头像（<img :src="ajax">或者<img :src="localStorage.getItem()">），那就会导致动画撕裂。见下图

但如果我用css加载就不会出现撕裂。
1、在A页面里点击头像，把图像赋值给vuex（或者localstorage）
2、进入B页面，获取头像。不要用<img :src>，改成<div :style="{backgroundImage:url(vuex)}">或者<div :style="{backgroundImage:url(localStorage.getItem)}">，动画就能连贯起来。见下图

我猜测原因是把css写在html顶部，这样css就能比js优先加载。等到动画动起来的时候，background-image已经拿到属性了，动画就不会撕裂了。

Answer 2

只从这个流程上来说，B页面里的这个函数就不属于B页面的功能范畴。假设我直接访问B页面呢？这个函数应该算是解析路由之前就得执行吧。

我在猜测A页面是列表，B页面是A列表中某一项ID请求详情的展示页。你想在A的列表中点击，然后获取详情，如果成功就去B展示，如果失败就还在A页面提示错误，防止用户看到错误的数据。

Answer 3

当有多个业务场景需要这个函数时，那这个函数应该属于公共函数，应该让它在某个业务中抽离出来，假如抽离困难（有很多属于某个业务的东西），那就说明该函数不够细化，应该在进行细化让公共功能单独组成新函数

Answer 4

可以这样：

// A 页面
const pageB = open('/b', '_blank');
pageB.funcStr = (() => {
    console.log('俺是 A 页面给的函数');
}).toString();

// B 页面
window.func = eval(window.funcStr);

不过局限性很多，例如函数中引用的所有依赖都要提前赋给 pageB。

Answer 5

最近思考过这个问题。实际上出现这种不符合逻辑的想法主要来源于对url认识不彻底。无论是以前的web开发，还是现在的单页页面。url始终承担的者一个基本功能，就是携带了信息，这个信息可简要概括为视图的定位信息。也就是说，我只要访问这个路由，就能访问这个页面（当然一些单页的后台没有这种要求，有可能能是只要是第一次访问都会跳转到首页，那么url就无所谓了，但是一般不会这么做）。所以视图的定位就是百分百根据url来决定的，任何其他信息都不应该出现，比如react跳转时可以传递一些其他信息，但是这些信息对于直接访问这个视图是没有的。

所以，视图与url是对应起来的，如问题所示，如果你想要携带一些其他信息，也需要通过url来传递，比如文章详情直接跳转到评论，应该是url携带跳转定义，然后视图进行处理，最常见的方式就是在queryString传递信息，比如：?focus=#comment。你想要执行一些操作，那么就必须在url存储对应关系，并判断处理，否则比如会丢失信息。