【SDU项目实训2019级】router-link的:to 和@click谁先执行

在写下面的代码的时候：

                <div class="section-title">

                  <router-link tag="a" :to="{path: '/contentAll',query:{id:tableData.contentId}}" @click="postRecord(tableData.contentId)" class="sTitle-sub-head" style="font-size: 18px;color: #606060">—展开—</router-link>

                </div>

由于点击这个router-link会触发两个不同的事件，一个是href属性所对应的链接，一个是@click，然后我发现，我每次点击，并不会触发我的@click里面调用的js函数，搜了一下，然后发现：

原因：router-link会阻止click，mouseover事件，只用click不用native，事件不会触发。

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。（转发的router-link 点击事件 - 掘金 (juejin.cn)）

然后将@click事件加上了native：

                <div class="section-title">

                  <router-link tag="a" :to="{path: '/contentAll',query:{id:tableData.contentId}}" @click.native="postRecord(tableData.contentId)" class="sTitle-sub-head" style="font-size: 18px;color: #606060">—展开—</router-link>

                </div>

能在跳转前执行@click对应的js函数了。然后将该数据向后端发送request请求，存到数据库。