【油猴开发指南】use方式注入得到Vue路由实例
我们可以注入到Vue3的路由中，从而依赖于Vue的事件触发来更贴近框架的原生体验首先查看Vue路由的使用方法
```js
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进行注入
```js
// ==UserScript==
// @name Vue3路由注入测试
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @descriptiontry 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.addRoute !== undefined) {
console.log('找到了路由',args)
const router=args
router.afterEach((to,from,fail)=>{
console.log(to,from,fail)
})
}
return has.call(this, ...args)
}
return instance
}
```
这里我们挂了afterEach钩子进行测试，也可以使用beforeEach，beforeResolve等钩子
实测已经成功得到了路由实例并且进行操控
同理我们也可以利用use对pinia等插件进行劫持
```js
// ==UserScript==
// @name Vue3路由注入测试
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @descriptiontry 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.state !== undefined) {
console.log('找到了pinia注册实例',args)
}
return has.call(this, ...args)
}
return instance
}
```
只需要找到找到关键的属性名进行判断即可
那么到这里你就了解了use注入以及路由和pinia的获取方式~
撒花~ 6点，哥哥通宵女朋友不说的？ 王一之 发表于 2024-11-11 09:47
6点，哥哥通宵女朋友不说的？
已经完全错开了....
现在她晚上睡我白天睡
页:
[1]