在學習路由時,想給<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標簽
添加之后點擊時間生效:

