在 Vue 3 中，路由跳转通常是通过 Vue Router 实现的。Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，使构建单页面应用变得易如反掌。
下面是一些在 Vue 3 中使用 Vue Router 进行路由跳转的基本步骤：
- 安装 Vue Router
如果你还没有安装 Vue Router，你可以通过 npm 或 yarn 来安装它：
npm install vue-router@4
# 或者
yarn add vue-router@4请注意，Vue 3 需要与 Vue Router 4 版本一起使用。
- 创建路由配置
在你的项目中，你需要定义一个或多个路由配置。这通常在 router/index.js 或类似的文件中完成：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, // ... 其他路由配置
]; const router = createRouter({ history: createWebHistory(), routes, // (缩写) 相当于 routes: routes
}); export default router;- 在 Vue 应用中使用路由
在你的主 Vue 应用文件中（通常是 main.js 或 main.ts），你需要安装路由实例：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; const app = createApp(App); app.use(router); app.mount('#app');- 进行路由跳转
在 Vue 组件中，你可以使用 router-link 组件进行声明式导航，或者使用 $router 实例进行编程式导航。
声明式导航 (router-link)
<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div>
</template>编程式导航 ($router)
在 Vue 组件的方法或生命周期钩子中，你可以使用 $router 实例进行编程式导航：
<template> <button @click="goToAbout">Go to About</button>
</template> <script>
export default { methods: { goToAbout() { this.$router.push({ name: 'About' }); // 使用路由名称 // 或者 this.$router.push('/about'); // 使用路径 }, },
};
</script>$router.push 方法用于导航到一个新的路由，它接受一个路由位置对象或者一个字符串路径作为参数。你还可以使用 $router.replace 方法来替换当前路由，而不是添加一个新的历史记录条目。
这就是在 Vue 3 中使用 Vue Router 进行路由跳转的基本流程。你可以根据项目的具体需求进一步定制路由配置，例如添加嵌套路由、重定向、路由守卫等高级功能。
<script setup>中编程式导航
在 Vue 3 的 <script setup> 语法中，编程式导航通常通过 useRouter 钩子来实现。useRouter 钩子提供了对路由实例的访问，从而允许你在组件内部进行编程式导航。
以下是如何在 <script setup> 中使用 useRouter 进行编程式导航的示例：
首先，确保你已经安装并正确配置了 Vue Router。
然后，在你的组件中，使用 <script setup> 语法和 useRouter 钩子：
<template> <button @click="goToAbout">Go to About</button>
</template> <script setup>
import { useRouter } from 'vue-router'; const router = useRouter(); const goToAbout = () => { router.push({ name: 'About' }); // 使用路由名称 // 或者 router.push('/about'); // 使用路径
};
</script>在上面的示例中，我们首先从 vue-router 导入 useRouter 钩子。然后，在 <script setup> 中，我们调用 useRouter 来获取路由实例，并将其存储在 router 常量中。接着，我们定义了一个 goToAbout 方法，当按钮被点击时，该方法会被调用，并使用 router.push 方法进行编程式导航。
router.push 方法接受一个路由位置对象或字符串路径作为参数，这取决于你想要如何指定目标路由。你可以使用路由名称（如果已定义）或直接使用路径字符串。
如果你想替换当前路由而不是添加一个新的历史记录条目，你可以使用 router.replace 方法，其用法与 router.push 类似。
请注意，<script setup> 是 Vue 3 引入的一种更简洁的组件语法，它允许你在 <script> 标签内直接声明组件的响应式状态、计算属性、方法等，而无需显式导出它们。这种语法特别适用于与 Composition API 一起使用，使得组件逻辑更加集中和清晰。
 的详细用法)
)