diff --git a/.gitignore b/.gitignore
index 775e611..7aaf6eb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -73,4 +73,6 @@ firebase.json
 
 # vercel build output api
 # https://vercel.com/docs/build-output-api/v3
-.vercel
\ No newline at end of file
+.vercel
+
+pnpm-lock.yaml
diff --git a/README.md b/README.md
index 8259974..c0e6f88 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 Status: Meme
 
-A 2kB zero-config router and prefetcher that makes a static site feel like a blazingly fast SPA.
+A 3kB zero-config router and prefetcher that makes a static site feel like a blazingly fast SPA.
 
 ## Why?
 
@@ -49,6 +49,10 @@ window.addEventListener('flamethrower:router:end', hideLoader);
 
 // Disable it
 router.enabled = false;
+
+// Subscribe/unsubscribe specific routes to function
+router.subscribe(['<route>'], <function name>);
+router.unsubscribe('<route>', <function name>);
 ```
 
 Opt-out of specific links for full page load.
@@ -85,6 +89,40 @@ Prefecthing is disabled by default.
 const router = flamethrower({ prefetch: 'visible' });
 ```
 
+### route subscriptions
+
+the router class extends the routerdata class, which has the subscribe method
+
+see example/main.js for some more complex use cases
+
+```js
+router.subscribe(['/logme/', '/'], <function name>);
+router.unsubscribe('/', <function name>);
+
+function logMe() {
+    console.log('hi mom');
+}
+
+// Subscribe all routes to function
+router.subscribe(['*'], logMe);
+
+// only call function once
+// ie to create a closure over multiple subscriptions
+router.subscribe(['**'], closeMe);
+function closeMe() {
+    router.subscribe(['/false/'], falseMe);
+    router.subscribe(['/true/'], trueMe);
+    let val = true;
+    function falseMe() {
+        val = false;
+    }
+    function trueMe() {
+        val = true;
+    }
+}
+```
+
+
 ### Misc
 
 **Supported in all browsers?** Yes. It will fallback to standard navigation if `window.history` does not exist.
diff --git a/example/about/index.html b/example/about/index.html
index 31662b4..c0e2425 100644
--- a/example/about/index.html
+++ b/example/about/index.html
@@ -4,15 +4,18 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../favicon.ico" type="image/png" />
+    <link rel="icon" href="/favicon.ico" type="image/png" />
     <meta name="description" content="The About Page" />
     <meta name="extra" content="test" />
     <title>About</title>
+    <!--
     <script defer type="module">
       import flamethrower from '/flamethrower.js';
-      flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
+      const router = flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
     </script>
+    -->
 
+    <script defer type="module" src="/main.js"></script>
     <script defer data-reload src="/script1.js"></script>
     <script defer src="/script2.js"></script>
 
@@ -40,7 +43,7 @@ <h1 id="heading">About</h1>
     <div id="keep" flamethrower-preserve>
       <article>
         <p>This text should be preserved when starting from about</p>
-      </article> 
+      </article>
     </div>
 
 
@@ -57,6 +60,10 @@ <h3>Scripts</h3>
     <p>Scripts from body or head with data-reload attr should always run</p>
     <p id="bodyCheck"></p>
     <p id="headCheck"></p>
+    <p id="subscriberCheck"></p>
+    <p class="multi-route"></p>
+    <p id="subscriberCount"></p>
+    <p id="global-check"></p>
     <p id="headCheck2">default text</p>
 
     <div style="margin-top: 1000px"></div>
diff --git a/example/bar.js b/example/bar.js
new file mode 100644
index 0000000..01749a0
--- /dev/null
+++ b/example/bar.js
@@ -0,0 +1,27 @@
+
+export class Bar {
+    constructor(val) {
+        this._value = val;
+    }
+
+    logVal() {
+        console.log(this.value);
+    }
+
+    setText() {
+        let el = document.getElementById("global-check");
+        el.innerText = this.value;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(val) {
+        if (this._value !== val) {
+            this._value = val;
+            this.logVal();
+            this.setText();
+        }
+    }
+}
diff --git a/example/foo.js b/example/foo.js
new file mode 100644
index 0000000..94c203b
--- /dev/null
+++ b/example/foo.js
@@ -0,0 +1,11 @@
+
+export class Foo {
+    constructor(id, value) {
+        this.el = document.getElementById(id);
+        this.val = value;
+    }
+
+    apply() {
+        this.el.innerText = this.val;
+    }
+}
diff --git a/example/index.html b/example/index.html
index 0b6b2bd..622dbb5 100644
--- a/example/index.html
+++ b/example/index.html
@@ -7,10 +7,13 @@
     <link rel="icon" href="favicon.ico" type="image/png" />
     <meta name="description" content="The Home Page" />
     <title>Flamethrower</title>
+    <!--
     <script defer type="module">
       import flamethrower from '/flamethrower.js';
-      flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
+      const router = flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
     </script>
+    -->
+    <script defer type="module" src="/main.js"></script>
 
     <style>
       #heading {
@@ -34,9 +37,12 @@ <h1 id="heading">Home</h1>
     <div id="keep" flamethrower-preserve>
       <article>
         <p>This text should be preserved when starting from home</p>
-      </article> 
+      </article>
     </div>
 
+    <p id="unsub-check"></p>
+    <p id="global-check"></p>
+
     <script>
       // test
       window.addEventListener('flamethrower:router:fetch-progress', ({ detail }) => {
diff --git a/example/main.js b/example/main.js
new file mode 100644
index 0000000..df81004
--- /dev/null
+++ b/example/main.js
@@ -0,0 +1,65 @@
+import flamethrower from './flamethrower.js';
+
+import { Bar } from './bar.js';
+
+const router = flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
+
+// subscribe all routes to function
+router.subscribe(["*"], all);
+
+// subscribe only one route
+router.subscribe(["/about/"], oneRoute);
+router.subscribe(["/"], unsubme);
+
+// subscribe multiple routes to one function
+router.subscribe(["/test/", "/about/"], multiroute);
+
+// subscribe route to an unsubscription
+router.subscribe(["/about/"], subUnsub);
+
+// subscribe a closurish type deal
+// probably not recommended to use this in most cases, unless working with global variables
+router.subscribe(["**"], closeMe);
+
+function all() {
+    console.log("look mom, you can call functions on every route!");
+}
+
+// dynamic import for route
+async function oneRoute() {
+    const { Foo } = await import("./foo.js");
+    const foo = new Foo("subscriberCheck", "✔️ single route subscription works");
+    foo.apply();
+}
+
+async function unsubme() {
+    const { Foo } = await import("./foo.js");
+    const foo = new Foo("unsub-check", "✔️ go to about, come back, and I'll be gone. Don't worry, I'll come back on reload");
+    foo.apply();
+}
+
+function multiroute() {
+    let el = document.querySelector(".multi-route");
+    el.innerText = "✔️ multi route subscription works"
+}
+
+function subUnsub() {
+    router.unsubscribe("/", unsubme);
+}
+
+function closeMe() {
+    const bar = new Bar("hi");
+    router.subscribe(["/"], t1);
+    router.subscribe(["/about/"], t2);
+    router.subscribe(["/test/"], t3);
+    function t1() {
+        bar.value = "✔️ hi mom";
+    }
+    function t2() {
+        bar.value = "✔️ hi son";
+    }
+    function t3() {
+        bar.value = "✔️ how's my little computer scientist today?";
+    }
+}
+
diff --git a/example/test/index.html b/example/test/index.html
index a665f80..3b6c36e 100644
--- a/example/test/index.html
+++ b/example/test/index.html
@@ -6,10 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="../favicon.ico" type="image/png" />
     <title>Test Page</title>
+    <!--
     <script defer type="module">
       import flamethrower from '/flamethrower.js';
-      flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
+      const router = flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
     </script>
+    -->
+    <script defer type="module" src="/main.js"></script>
     <style>
       #load-bar {
         background-color: blue;
@@ -26,6 +29,8 @@
     <h1 id="heading">Test Page</h1>
     <a href="/">home</a>
     <a href="/about">about</a>
+    <p class="multi-route"></p>
+    <p id="global-check"></p>
     <script>
       // test
       window.addEventListener('flamethrower:router:fetch-progress', ({ detail }) => {
diff --git a/lib/interfaces.ts b/lib/interfaces.ts
index 7e6c0ca..9af6841 100644
--- a/lib/interfaces.ts
+++ b/lib/interfaces.ts
@@ -1,5 +1,9 @@
 import { Router } from './router';
 
+export interface Subscription {
+    (): void | Promise<void>;
+}
+
 export interface FlamethrowerOptions {
   log?: boolean;
   /**
diff --git a/lib/pool.ts b/lib/pool.ts
new file mode 100644
index 0000000..e9cebb4
--- /dev/null
+++ b/lib/pool.ts
@@ -0,0 +1,33 @@
+import { Subscription } from './interfaces';
+
+export class Pool {
+    public insert: number;
+    public buffer: Subscription[];
+    constructor() {
+        this.insert = -1;
+        this.buffer = [];
+    }
+
+    /**
+     * @param {Subscription} val
+     * @returns {number}
+     * adds the callback function to the buffer
+     * if it does not yet contain it
+     */
+    public push(val: Subscription): number {
+        if (!this.buffer.includes(val)) {
+            this.insert++;
+            this.buffer[this.insert] = val;
+        }
+        // return the index of the specific function
+        return this.buffer.indexOf(val);
+    }
+
+    /**
+     * @param {number} idx
+     */
+    public del(idx: number) {
+        this.buffer.splice(idx, 1);
+        this.insert--;
+    }
+}
diff --git a/lib/router.ts b/lib/router.ts
index 2504e40..19a7b22 100644
--- a/lib/router.ts
+++ b/lib/router.ts
@@ -1,3 +1,4 @@
+import { RouterData } from './routerdata';
 import { FetchProgressEvent, FlamethrowerOptions, RouteChangeData } from './interfaces';
 import { addToPushState, handleLinkClick, handlePopState, scrollTo } from './handlers';
 import { mergeHead, formatNextDocument, replaceBody, runScripts } from './dom';
@@ -7,12 +8,13 @@ const defaultOpts = {
   pageTransitions: false,
 };
 
-export class Router {
+export class Router extends RouterData {
   public enabled = true;
   private prefetched = new Set<string>();
   private observer: IntersectionObserver;
 
   constructor(public opts?: FlamethrowerOptions) {
+    super();
     this.opts = { ...defaultOpts, ...(opts ?? {}) };
 
     if (window?.history) {
@@ -244,6 +246,7 @@ export class Router {
           scrollTo(type, scrollId);
         }
 
+        this.notify();
 
         window.dispatchEvent(new CustomEvent('flamethrower:router:end'));
 
diff --git a/lib/routerdata.ts b/lib/routerdata.ts
new file mode 100644
index 0000000..82bf8d7
--- /dev/null
+++ b/lib/routerdata.ts
@@ -0,0 +1,103 @@
+import { fullURL } from './handlers';
+import { Pool } from './pool';
+import { Subscription } from './interfaces';
+
+export class RouterData extends Pool {
+    private _subscribers: [string, number][];
+    private _subsSize: number;
+    constructor() {
+        super();
+        this._subscribers = [];
+        this._subsSize = 0;
+        // call notify after first event to call notify
+        // on page load
+        setTimeout(() => {
+            this.notify();
+        }, 0)
+    }
+
+    /* calls applicable functions in this.buffer */
+    public notify(): void {
+        let i = 0;
+        // loop the subscribers to find the appropriate functions to call
+        for (; i < this._subsSize; i++) {
+            let route = this._subscribers[i][0];
+            let idx = this._subscribers[i][1];
+            if (route === window.location.href || route === "*") {
+                this.buffer[idx]();
+            }
+        }
+    }
+
+    /**
+     * @param {string[]} routes
+     * @param {Subscription} routerSub
+     * adds the function to the buffer and stores location
+     * of function in buffer
+     */
+    public subscribe(routes: string[], routerSub: Subscription): void {
+        let i = 0;
+        let size_t = routes.length;
+        for(; i < size_t; i++) {
+            let route = routes[i];
+            let url: string = route;
+            // call closurish functions only once, don't subscribe them
+            if (url === '**') {
+                routerSub();
+                return;
+            }
+            // properly format url
+            if (url !== '*') {
+                url = fullURL(new URL(route, location.href).href);
+            }
+            // add function to the pool
+            let t = this.push(routerSub);
+            // keep track of  url and it's reference to it's subscription
+            this._subscribers.push([url, t]);
+            this._subsSize++;
+        }
+    }
+
+    /**
+     * @param {string} route
+     * @param {Subscription} routerSub
+     * removes entry, deletes from buffer if no more routes depend on function
+     */
+    public unsubscribe(route: string, routerSub: Subscription): void {
+        if (this.buffer.includes(routerSub)) {
+            let bufIdx = this.buffer.indexOf(routerSub);
+            let found: [string, number];
+            let deps: number = 0;
+            let url: string = route;
+            if (url !== '*') {
+                url = fullURL(new URL(route, location.href).href);
+            }
+            // loop subscriptions to see if other routes depend on same function
+            for (let i = 0; i < this._subsSize; i++) {
+                let t = this._subscribers[i];
+                if (t[1] === bufIdx && t[0] !== url) {
+                    deps++;
+                }
+                if (t[0] === url && t[1] === bufIdx) {
+                    found = t;
+                }
+            }
+            if (found) {
+                let foundIdx = this._subscribers.indexOf(found);
+                this._subscribers.splice(foundIdx,1);
+                this._subsSize--;
+                // remove references to this function if no more routes depend
+                // on the function
+                if (deps === 0) {
+                    for (let i = 0; i < this._subsSize; i++) {
+                        let data = this._subscribers[i];
+                        if (data[1] > bufIdx) {
+                            this._subscribers[i][1] = data[1] - 1;
+                        }
+                    }
+                    this.del(bufIdx);
+                }
+            }
+        }
+    }
+}
diff --git a/test/main.spec.ts b/test/main.spec.ts
index 133790f..20f4065 100644
--- a/test/main.spec.ts
+++ b/test/main.spec.ts
@@ -9,7 +9,7 @@ test('basic navigation works', async ({ page }) => {
 
   await about.click();
   await expect(page).toHaveURL('/about/');
-  await expect(page).toHaveTitle(/About/); 
+  await expect(page).toHaveTitle(/About/);
 
   await page.goBack();
   await expect(page).toHaveURL('/');
@@ -101,3 +101,70 @@ test('prefetching works', async ({ page }) => {
 
 
 });
+
+test('single route subscription works', async ({ page }) => {
+
+  await page.goto('/');
+  const about = page.locator('#about');
+  await about.click();
+
+  const subsCheck = page.locator('#subscriberCheck');
+
+  await expect(subsCheck).toContainText('single route subscription works');
+})
+
+test('multi route subscription works', async ({ page }) => {
+
+  await page.goto('/');
+
+  const about = page.locator('#about');
+  await about.click();
+
+  const subsCheck = page.locator('.multi-route');
+  await expect(subsCheck).toContainText('multi route subscription works');
+
+  await page.goto('/test/');
+  const subsCheck2 = page.locator('.multi-route');
+  await expect(subsCheck2).toContainText('multi route subscription works');
+})
+
+test('subscribed functions called on page load', async ({ page }) => {
+  await page.goto('/about/');
+
+  const subsCheck = page.locator('#subscriberCheck');
+  await expect(subsCheck).toContainText('single route subscription works');
+
+  const subsCheck2 = page.locator('.multi-route');
+  await expect(subsCheck2).toContainText('multi route subscription works');
+})
+
+test('can unsubscribe', async ({ page }) => {
+  await page.goto('/');
+
+  const unsubcheck = page.locator('#unsub-check');
+  await expect(unsubcheck).toContainText("go to about, come back, and I'll be gone. Don't worry, I'll come back on reload");
+
+  const about = page.locator('#about');
+  await about.click();
+
+  const home = page.locator('#go');
+  await home.click();
+
+  await expect(unsubcheck).toContainText("");
+})
+
+test('wizardry works', async ({ page }) => {
+
+  await page.goto('/');
+  const unsubcheck = page.locator('#global-check');
+  await expect(unsubcheck).toContainText("hi mom");
+
+  await page.goto('/about/');
+  const unsubcheck2 = page.locator('#global-check');
+  await expect(unsubcheck2).toContainText("hi son");
+
+  await page.goto('/test/');
+  const unsubcheck3 = page.locator('#global-check');
+  await expect(unsubcheck3).toContainText("how's my little computer scientist today?");
+})
+