在路由器链接vuejs中制作@click事件

在Vuejs中，可以通过@click指令来创建点击事件。当用户单击绑定该指令的元素时，指定的方法将被调用。在路由器链接Vuejs中，可以将@click指令用于路由链接，使用户单击链接时导航到指定的页面。

以下是在路由器链接Vuejs中制作@click事件的步骤：

1. 首先，需要创建一个基本的Vuejs应用程序，并安装Vue Router插件：

import Vue from ‘vue’;
import VueRouter from ‘vue-router’;

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: ‘/home’,
      component: Home,
    },
    {
      path: ‘/about’,
      component: About,
    },
  ],
});

2. 创建一个包含路由链接的Vue组件。可以使用<router-link>元素来创建路由链接。

<template>
  <div>
    <h1>My App</h1>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

3. 为路由链接绑定@click事件。可以通过在<router-link>元素上添加@click指令来绑定事件。在事件处理程序中，可以使用router.push()方法将用户导航到指定的页面。

<template>
  <div>
    <h1>My App</h1>
    <router-link to="/home" @click="navigate('/home')">Home</router-link>
    <router-link to="/about" @click="navigate('/about')">About</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    navigate(path) {
      this.$router.push(path);
    },
  },
};
</script>

在上面的代码中，navigate()方法接收要导航到的页面的路径，然后调用router.push()方法将用户导航到该页面。

现在，当用户单击路由链接时，Vuejs将调用navigate()方法，并将其传递的路径作为参数。然后，该方法将使用router.push()方法将用户导航到指定的页面。

以上是在路由器链接Vuejs中制作@click事件的完整步骤和代码示例。