vue3点击事件出发后实现页面跳转

在Vue3中，你可以使用`router`实现页面跳转。首先你需要在Vue项目中安装`vue-router`，然后在创建Vue实例的时候，引入并使用`router`。

安装`vue-router`：

npm install vue-router

引入并使用`router`：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

const app = createApp(App)

app.use(router)

app.mount('#app')

在上面的代码中，我们创建了一个`router`，并在Vue实例中使用了它。同时，我们定义了两个路由，分别是`/`和`/about`，分别对应两个组件`Home`和`About`。

接下来，在你需要跳转页面的点击事件中，使用`router`的`push`方法来实现跳转：

<button @click="goToAbout()">Go to About</button>

...

methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

在上面的代码中，我们在点击事件中调用了`goToAbout`方法，该方法使用`router`的`push`方法实现页面跳转到`/about`路由对应的组件。