[Vuejs]-VUE: How to prevent next click with delay?

1๐Ÿ‘

My suggestion is to use the setTimeout to disable/enable the link, like this:

<a :disabled="!linkEnabled" href="javascript:void(0)" @click="delay(item.path)">{{ item.name }}</a>

then in your function:

delay(to) {
    this.linkEnable = false;
    this.$router.push(to);
    setTimeout(() => this.linkEnable = true, 600)
}

0๐Ÿ‘

You can create router and use beforeEach to leasten router change and wait form some time

const routes = [{
    path: "/login",
    name: "Login Component",
    component: LoginComponent
}]
const router = new createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    // wait how mach you want then next('to your route')
}


export default router;

For more Vue Router

Leave a comment