Naonao Blog

Welcome to Naonao Blog

0%

vue router api.now is not a function

发表于 阅读次数： Valine：

问题描述

记录一次奇怪的 DEBUG 过程

事情的起因是我在搭建一个前端项目, 第一次打开可以, 但是如果再刷新页面则会报错.

仔细查看我的代码, 发现没有什么问题, 最后跟踪错误到了vue-router

控制台报错

1
2
3
4
Uncaught (in promise) TypeError: api.now is not a function
    at vue-router.esm-bundler.js?v=44d7056b:2545:31
    at triggerAfterEach (vue-router.esm-bundler.js?v=44d7056b:3166:13)
    at vue-router.esm-bundler.js?v=44d7056b:3069:13

继续跟踪

1
2
3
4
5
6
7
8
9
10
11
api.addTimelineEvent({
                layerId: navigationsLayerId,
                event: {
                    title: 'End of navigation',
                    subtitle: to.fullPath,
                    time: api.now(), <--
                    data,
                    logType: failure ? 'warning' : 'default',
                    groupId: to.meta.__navigationId,
                },
            });

如果出错的地方在业务逻辑, 则可以很容易的找出错误原因, 但是这个地方报错, 让我毫无头绪.

Google …

没想到还真的找到了解决方案, 而且还就在该文章发布时间的前半个月(还热乎着…)

解决方案

That’s from the Vue devtools plugin. And only happens if you are still on the 6.0 beta of Vue devtools.

Happened to me today when checking in another browser that still was on the 6.0 beta version instead of the stable one we released recently.

Solution: remove the beta, upgrade to the stable release

大意是说, 如果你开发时使用了 Vue Devtools 这个插件, 并且还是 6.0 beta 版本时, 就会发生这个问题.

解决方案也很简单, 卸载这个测试版, 安装稳定版

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

现在想想, 这个插件我一年前装的, 然后就没管过, 我不清楚它会不会自动更新, 但是确实在我意想不到的地方给我挖了个大坑….

总结

这个事情总结出什么经验呢?

BUG 有时候就是发生的这么毫无逻辑…让人捉摸不定

参考链接

https://github.com/vuejs/router/issues/1338