--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>Vue Router e2e tests - Multi app</title>
+ <!-- TODO: replace with local imports for promises and anything else needed -->
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
+ </head>
+ <body>
+ <a href="/"><< Back to Homepage</a>
+ <hr />
+
+ <button id="mount1">Mount App 1</button>
+ <button id="mount2">Mount App 2</button>
+ <button id="mount3">Mount App 3</button>
+
+ <br />
+
+ <button id="unmount1">Unmount App 1</button>
+ <button id="unmount2">Unmount App 2</button>
+ <button id="unmount3">Unmount App 3</button>
+
+ <hr />
+
+ popstate count: <span id="count"></span>
+
+ <div id="app-1"></div>
+ <div id="app-2"></div>
+ <div id="app-3"></div>
+ </body>
+</html>
--- /dev/null
+import { createRouter, createWebHistory } from '../../src'
+import { RouteComponent } from '../../src/types'
+import { createApp, ref, watchEffect } from 'vue'
+
+const Home: RouteComponent = {
+ template: `<div>Home</div>`,
+}
+
+const User: RouteComponent = {
+ template: `<div>User: {{ $route.params.id }}</div>`,
+}
+
+// path popstate listeners to track the call count
+let activePopStateListeners = ref(0)
+const countDiv = document.getElementById('count')!
+
+watchEffect(() => {
+ countDiv.innerHTML = '' + activePopStateListeners.value
+})
+
+const originalAddEventListener = window.addEventListener
+const originalRemoveEventListener = window.removeEventListener
+window.addEventListener = function (name: string, handler: any) {
+ if (name === 'popstate') {
+ activePopStateListeners.value++
+ }
+ return originalAddEventListener.call(this, name, handler)
+}
+window.removeEventListener = function (name: string, handler: any) {
+ if (name === 'popstate') {
+ activePopStateListeners.value--
+ }
+ return originalRemoveEventListener.call(this, name, handler)
+}
+const router = createRouter({
+ history: createWebHistory('/' + __dirname),
+ routes: [
+ { path: '/', component: Home },
+ { path: '/users/:id', component: User },
+ ],
+})
+
+let looper = [1, 2, 3]
+
+let apps = looper.map(i =>
+ createApp({
+ template: `
+ <div id="app-${i}">
+ <ul>
+ <li><router-link to="/">Home</router-link></li>
+ <li><router-link to="/users/1">User 1</router-link></li>
+ <li><router-link to="/users/2">User 2</router-link></li>
+ </ul>
+
+ <router-view></router-view>
+ </div>
+ `,
+ })
+)
+
+looper.forEach((n, i) => {
+ let mountBtn = document.getElementById('mount' + n)!
+ let unmountBtn = document.getElementById('unmount' + n)!
+
+ let app = apps[i]
+
+ app.use(router)
+
+ mountBtn.addEventListener('click', () => {
+ app.mount('#app-' + n)
+ })
+
+ unmountBtn.addEventListener('click', () => {
+ app.unmount('#app-' + n)
+ })
+})
projects / thirdparty / vuejs / router.git / commitdiff
