router-link 阻止默认的点击事件么？

Question

<template>
    <div class="routerdata">
        <div class="hd" style="height: 100%;">
            <h1 class="page_title">Vue</h1>
            <p class="page_desc">利用路由实现tab切换并传参数</p>
        </div>
        <div class="weui_tab">
            <ul class="weui_navbar">
                <router-link class="weui_navbar_item"
                     **@click="random"** to="/routerdata/tab1">Vuejs</router-link>
                <router-link class="weui_navbar_item" to="/routerdata/tab2">VueTab</router-link>
            </ul>
            <div class="weui_tab_bd">
                <router-view :message="msg"></router-view>
            </div>
        </div>
    </div>
</template>
<style scoped>
.weui_tab_bd{
    width:100%;
    height:200px;
}
</style>
<script>
    export default{
        data(){
            return{
                msg:''
            }
        },
        methods:{
            random(){
                this.msg=Math.random();
            }
        }
    }
</script>

@click="random" 不能被触发是为什么？

Answer 1

router-link阻止的不是点击事件，而是链接的浏览器默认跳转事件，对点击事件没什么影响的

Answer 2

如果你想在跳转前进行一些操作，你不应该使用router-link而是一般标签，然后用router的go方法来跳转。

Answer 3

应该用钩子来处理

另外，路由传递参数可以直接使用动态路由的方式