如何做到当浏览器地址栏中的url变化后重新加载脚本？

木羊羽

本帖最后由 木羊羽 于 2022-2-8 15:45 编辑

如何做到当浏览器地址栏中的url变化后重新加载脚本？

我是在哔哩哔哩视频播放界面点击视频后油猴脚本并没有重新加载，请问哥哥们代码应该怎么写呢？

图片

李恒道

bilibili使用的是vue框架
vue-router是vue框架的路由，主要有hash，histroy，abstract三种模式
b站我记着是用的history模式
对pushState api可以尝试劫持一下看看‘
mdn来自https://developer.mozilla.org/en ... I/History/pushState
或者拿到vue对象之后，在vue-router修改出来一个跳转路由，每一次进行路由跳转的时候回调你函数也是OK的

李恒道

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})

查看vuerouter源码

https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.js

VueRouter.prototype.afterEach = function afterEach (fn) {
    return registerHook(this.afterHooks, fn)
  };

往afterhooks丢个函数应该就好了

木羊羽

李恒道 发表于 2022-2-8 16:43
[md]```javascript
router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)

哥哥 我努力一下我看能不能搞懂

李恒道

木羊羽 发表于 2022-2-8 17:06
哥哥 我努力一下我看能不能搞懂

https://bbs.tampermonkey.net.cn/ ... thread&tid=1727
document.querySelector('#app').__vue__.$router.afterHooks.push(()=>{console.log('路由发生改变')})

木羊羽

李恒道 发表于 2022-2-8 16:43
[md]```javascript
router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)

需要首先在脚本里面引入这个vue-router.js吗？

李恒道

木羊羽 发表于 2022-2-8 17:24
需要首先在脚本里面引入这个vue-router.js吗？

不用
document.querySelector('#app').__vue__.$router.afterHooks.push(()=>{console.log('路由发生改变')})
主要是看对应的源码，找注入点一点一点跳进去

木羊羽

李恒道 发表于 2022-2-8 17:28
不用
document.querySelector('#app').__vue__.$router.afterHooks.push(()=>{console.log('路由发生改变 ...

在脚本里面使用出错，在命令行使用成功

李恒道

木羊羽 发表于 2022-2-8 17:51
在脚本里面使用出错，在命令行使用成功

要看脚本执行时机以及页面初始化时机的

李恒道

木羊羽 发表于 2022-2-8 17:51
在脚本里面使用出错，在命令行使用成功

可以setinterval循环一下