在学习路由时，想给<router-link>加个点击事件，结果发现不生效，百度之后问题解决
贴个代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>命名视图</title>
<style>
.menu a{
text-decoration: none;
}
a.router-link-active{
border-bottom: 5px solid rgba(0, 198, 255, 1);
}
</style>
</head>
<body>
<div id="app">
<div class="menu">
<router-link v-on:click="myClick" to="/home">首页</router-link>
<router-link to="/about">About</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/main2.js"></script>
</html>
main2.js
var router=[
{
path:'/',
redirect:'/home'
},
{
name:'home',
path:'/home',
component:{
template:`<div>
<p>Home</p>
</div>`
}
},
{
name:'about',
path:'/about',
component:{
template:`<div>
<p>about</p>
</div>`
}
},
]
var route=new VueRouter({
routes:router,
})
new Vue({
el:'#app',
router:route,
methods:{
myClick:function(){
console.log(this.$router.options.routes)
}
},
data:{
}
})
文章：
https://segmentfault.com/q/1010000007896386
在<router-link v-on:click.native="myClick" to="/home">首页</router-link> click后面加native即可生效
vue 自己定义的标签 <router-link> 还有 组件<my-vue-template/> 没有点击事件，H5不论什么白标签（<div>、）天生就有点击事件。加上 .native就变身H5标签
添加之后点击时间生效：