【vue3路由】单击按钮、跳转页面

在Vue3中，实现点击按钮跳转到另一个页面通常涉及到Vuex和Vue Router的结合使用。首先，你需要安装Vue Router库，它是一个强大的前端路由管理器。

1. 安装依赖：

npm install vue-router @vue/composition-api
# 或者如果使用yarn
yarn add vue-router @vue/composition-api

2. 在`main.js`文件中设置路由器基础配置：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

3. 创建路由组件并设置路径和组件映射。例如，假设有一个`LoginButton`组件：

<template>
  <button @click="goToLogin">登录</button>
</template>

<script setup>
import { useRouter } from '@vue-router'

const router = useRouter()

function goToLogin() {
  router.push('/login') // 跳转到'/login'路由
}
</script>

在这个例子中，当用户点击"登录"按钮时，`goToLogin`函数会被调用，这会触发当前Vue Router的导航，将页面重定向到`/login`路由对应的组件。