Vue router обнаруживает щелчок на router-link-точно-active

Question

Я видел этот вопрос несколько раз, но без хорошего ответа

У меня есть топ-меню со ссылками, и я хочу вызвать функцию, когда нажимаю на ссылку страницы, на которой я нахожусьсейчас

Как мне этого добиться?

Помните, что встроенные охранники не сработают, потому что маршрут не меняется

Answer 1

Мне кажется, я нашел более элегантное решение. Я сделал обертку для ссылок

<template>
    <a :href="resolvedRoute.route.fullPath" :class="{ 'is-active': resolvedRoute.route.name == $route.name }" @click.prevent="clicked">
        <slot></slot>
    </a>
</template>

<script>
    import EventBus from '@/event-bus'

    export default {
        name: 'menu-link',
        props: {
            to: {
                type: Object,
                default: {}
            }
        },
        computed: {
            isExactActive(){
                return this.$route.fullPath == this.resolvedRoute.route.fullPath
            },
            resolvedRoute(){
                return this.$router.resolve(this.to)
            }
        },
        methods: {
            clicked(){
                if(this.isExactActive)
                    return EventBus.$emit('page-reload', this.resolvedRoute.route)

                this.$router.push(this.to)
            }
        }
    }
</script>

Затем простой миксин

import EventBus from '@/event-bus'

export default {
    mounted(){
        EventBus.$on('page-reload', this.checkPageReload)
    },
    beforeDestroy(){
        EventBus.$off('page-reload', this.checkPageReload)
    },
    methods: {
        checkPageReload(route){
            if(route.name == this.$options.name && this.pageReload){
                EventBus.$emit('page-loading', true)
                this.pageReload(route)
            }
        }
    }
}

Я считаю, что это оптимальное решение.Мне просто нужно заменить ссылку на маршрутизатор на ссылку меню

Answer 2

Вы хотели бы вызвать функцию на всех ссылках и запустить навигацию оттуда, передаваемую параметром.

Затем проверьте, соответствует ли URL текущей страницы переданному параметру.

Например

if (this.$router.currentRoute == 'param passed') {
    return someOtherFucntion();
}

return this.$router.push('param passed');

Его называют программной навигацией, вы можете увидеть больше здесь.

https://router.vuejs.org/guide/essentials/navigation.html#programmatic-navigation