Vue router-link点击事件不生效

2021-08-22 19:35:46 阅读：133 来源： 互联网

标签：about Vue 点击 link home router path

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

添加之后点击时间生效：

标签：about,Vue,点击,link,home,router,path
来源： https://www.cnblogs.com/crazy-lc/p/15173226.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue router-link点击事件不生效