Vue router-link点击事件不生效

2023-11-27 21:48:16

在学习路由时，想给<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标签

添加之后点击时间生效：

Vue router-link点击事件不生效

码农公寓

相关文章