Question

我已经多次看到这个问题，但是没有很好的回答

我有一个带有链接的顶部菜单，当我单击当前所在页面的链接时，我想触发一个功能

我该如何实现？

请记住，因为路线不变，组件内的防护装置不会触发

Answer 1

您希望在所有链接上触发一个函数，并从中触发参数传递的导航。

然后检查当前页面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

Answer 2

我相信我找到了一个更优雅的解决方案我做了一个链接包装

<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)
            }
        }
    }
}

我认为这是最佳解决方案。我只需要用menu-link替换router-link

Vue路由器检测到对router-link-exact-active的点击

2 个答案: