vue3中通过click事件跳转

在Vue3中，你可以通过`router-link`组件来实现路由跳转，也可以通过`$router`实例来编程式地跳转路由。

1. 使用`router-link`组件

`router-link`是Vue Router提供的一个组件，它可以生成一个带有路由跳转功能的链接。你可以在模板中使用`router-link`来实现点击链接跳转到指定路由。

例如，你想要在点击一个按钮时跳转到`/home`路由，你可以这样写：

<router-link to="/home">
  <button>跳转到首页</button>
</router-link>

这个按钮会被渲染成一个带有跳转功能的链接，点击它就可以跳转到指定的路由。

2. 使用`$router`实例

除了使用`router-link`组件，你还可以通过`$router`实例来编程式地跳转路由。在Vue3中，你可以通过`$router`属性来访问`Vue Router`的实例。

例如，你想要在点击一个按钮时编程式地跳转到`/home`路由，你可以这样写：

<button @click="$router.push('/home')">跳转到首页</button>

这个按钮会绑定一个点击事件，当点击时调用`$router.push()`方法跳转路由。

注意：使用`$router`实例跳转路由时，需要在`setup()`函数中使用。例如：

import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    function handleClick() {
      router.push('/home')
    }

    return {
      route,
      handleClick
    }
  }
}

在`setup()`函数中，你可以通过`useRoute()`和`useRouter()`来获取`route`和`router`实例。然后在组件中可以使用`handleClick()`方法进行路由跳转。