vue router-link 路由跳转之前触发事件

文章目录

1. 1. 方式一: 在事件后面添加修饰符 native
2. 2. 方式二：使用编程式导航 router.push

一般情况下，路由跳转之前不会触发函数

<router-link :to="'/click'" @click="getClick">点击</router-link>

export default {
    methods: {
        getClick () {  // getClick 函数不会被触发
            console.log('跳转之前打印')
        }
    }
}

解决方式有两种

方式一: 在事件后面添加修饰符 native

<router-link :to="'/click'" @click.native="getClick">点击</router-link>

方式二：使用编程式导航 router.push

export default {
    methods: {
        getClick () {
            console.log('跳转之前打印')
            this.$router.push({path: '/click'})
        }
    }
}

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。