vue3点击按钮跳转路由

在Vue 3中，你可以使用Vue Router来实现路由跳转。下面是一个简单的示例：

首先，确保你已经安装了Vue Router。可以使用以下命令进行安装：

npm install vue-router@next

接下来，在你的Vue应用程序的入口文件（例如main.js）中，导入Vue Router，并且使用`createRouter`函数创建一个路由实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 在这里定义你的路由配置
    // 示例：定义一个名为Home的路由
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 示例：定义一个名为About的路由
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

在上面的代码中，我们定义了两个路由：'/'和'/about'，分别对应了Home和About组件。

然后，在你的组件模板中，你可以使用`<router-link>`来创建一个可以点击的链接，用于跳转到指定的路由：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
      // 或者使用命名路由
      // this.$router.push({ name: 'About' })
    }
  }
}
</script>

在上面的代码中，我们使用`<router-link>`来创建两个链接，分别跳转到'/'和'/about'。另外，我们还在按钮的点击事件中使用`$router.push()`来实现路由跳转，可以传递一个路径或者一个包含名称的对象。

这样，当你点击链接或者按钮时，就可以实现路由的跳转了。记得在你的组件中引入所需的路由组件（例如Home和About）并进行相应的配置。