上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

【油猴开发指南】use方式注入得到Vue路由实例

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    713

    主题

    6002

    回帖

    6788

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6788

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2024-11-11 06:26:29 | 显示全部楼层 | 阅读模式

    我们可以注入到Vue3的路由中,从而依赖于Vue的事件触发来更贴近框架的原生体验
    首先查看Vue路由的使用方法

    import { createMemoryHistory, createRouter } from 'vue-router'
    
    import HomeView from './HomeView.vue'
    import AboutView from './AboutView.vue'
    
    const routes = [
      { path: '/', component: HomeView },
      { path: '/about', component: AboutView },
    ]
    
    const router = createRouter({
      history: createMemoryHistory(),
      routes,
    })
    createApp(App)
      .use(router)
      .mount('#app')

    可以看到创建了router对象然后调用use使用,我们恰好可以通过use进行注入

    // ==UserScript==
    // @name         Vue3路由注入测试
    // @namespace    https://bbs.tampermonkey.net.cn/
    // @version      0.1.0
    // @description  try to take over the world!
    // @author       You
    // @match       http://localhost:5173/
    // @grant       unsafeWindow
    // @run-at      document-start
    
    // ==/UserScript==
    const originWeakSet = WeakSet;
    unsafeWindow.WeakSet = function () {
        const instance = new originWeakSet();
        const has = instance.has
        instance.has = function (...args) {
            if (args[0].addRoute !== undefined) {
                console.log('找到了路由',args[0])
                const router=args[0]
                router.afterEach((to,from,fail)=>{
                    console.log(to,from,fail)
                })
            }
            return has.call(this, ...args)
        }
        return instance
    }

    这里我们挂了afterEach钩子进行测试,也可以使用beforeEach,beforeResolve等钩子
    实测已经成功得到了路由实例并且进行操控
    图片.png
    同理我们也可以利用use对pinia等插件进行劫持

    // ==UserScript==
    // @name         Vue3路由注入测试
    // @namespace    https://bbs.tampermonkey.net.cn/
    // @version      0.1.0
    // @description  try to take over the world!
    // @author       You
    // @match       http://localhost:5173/*
    // @grant       unsafeWindow
    // @run-at      document-start
    
    // ==/UserScript==
    const originWeakSet = WeakSet;
    unsafeWindow.WeakSet = function () {
        const instance = new originWeakSet();
        const has = instance.has
        instance.has = function (...args) {
            debugger
            if (args[0].state !== undefined) {
                console.log('找到了pinia注册实例',args[0])
            }
            return has.call(this, ...args)
        }
        return instance
    }

    只需要找到找到关键的属性名进行判断即可
    图片.png

    那么到这里你就了解了use注入以及路由和pinia的获取方式~
    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2024-11-21 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    305

    主题

    4220

    回帖

    4076

    积分

    管理员

    积分
    4076

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2024-11-11 09:47:02 | 显示全部楼层
    6点,哥哥通宵女朋友不说的?
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    713

    主题

    6002

    回帖

    6788

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6788

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2024-11-11 11:00:22 | 显示全部楼层
    王一之 发表于 2024-11-11 09:47
    6点,哥哥通宵女朋友不说的?

    已经完全错开了....
    现在她晚上睡我白天睡
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表