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