Vue router-link点击事件不生效

Z时代
2024-01-10
分类：综合

vue

在学习路由时，想给<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 >
            <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:{
    }
})