vue 3/vue路由器 - onclick活动听众计划外射击

Question

使用Vue 3和Vue路由器。事件听众按计划的初始“单击”导航，从详细信息到vue页面。但是，在连续的“单击”尝试后， hidedEtails（）在没有感知的“单击”事件的情况下立即调用。

---

home.vue

<template>
    <main class="rounded">
        <item-one />
        <item-two />
    </main>
    <aside class="details__modal">
        <router-view></router-view>
    </aside>
</template>

我

<template>
    <button @click="showDetails(id)">Item Name</button>
</template>

<script lang="ts">
import {showDetails} from '@/scripts/utils'
</script>

---

详细信息。 AddeventListener（）通过全球导航护罩调用。

...
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: Home,
        children: [
            {
                path: 'details',
                name: 'details',
                component: () =>
                    import(
                        /* webpackChunkName: "details" */ '../views/Details.vue'
                    ),
                props: route => route.params,
            },
        ],
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

router.afterEach(to => {
    if (to.name === 'details')
        document.addEventListener('click', handle_hideDetails)
})

---

lidess.vue

在 showdetails（）上，详细信息。如果 props.id 不存在，则 HidedEtails（）将重定向到home.vue。在离开页面之前， removeEventListener（）是通过组件导航罩 onbeforerOuteLeave（）来调用的。

<template>
    <div class="details__wrapper">...</div
</template>

<script lang="ts">
...
export default defineComponent({
    props: {
        id: {
            type: String
        }
    },
    setup(props){
        if(!props.id) hideDetails()

        onBeforeRouteLeave(_ => document.removeEventListener('click', handle_hideDetails))
    }
})
</script>

---

utils.ts

所有实用程序功能都在这里。

import vm from '@/main'

export const handle_hideDetails = (e: Event): void => {
    const el = <HTMLElement>document.querySelector('div.details__wrapper')

    if (!e.composedPath().includes(el)) hideDetails()
}

export const showDetails = (id: string): void => {
    document.querySelector('aside.details__modal')?.classList.add('show')

    vm.$router.push({
        name: 'details',
        params: { id },
    })
}

export const hideDetails = (): void => {
    document.querySelector('aside.details__modal')?.classList.remove('show')
    setTimeout(() => vm.$router.push({ name: 'home' }), 2000)
}