Vue router-link點擊事件不生效


在學習路由時,想給<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標簽

添加之后點擊時間生效:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM