在 `setup` 函数中实现路由跳转：Vue3与Vue Router 4的集成

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在Vue3中，如果你使用的是Vue Router 4（与Vue3配套的版本），可以在 setup 函数中通过 useRouter 钩子来实现路由跳转。

使用 useRouter

import { useRouter } from 'vue-router';export default {
setup() {
const router = useRouter();// 定义一个方法来跳转到指定路由
const navigateToPage = (path) => {
router.push(path);
};return {
navigateToPage
};
}
};

示例

假设我们有一个按钮，点击后跳转到另一个页面：

<template>
<button @click="navigateToPage('/about')">Go to About Page</button>
</template><script>
import { useRouter } from 'vue-router';export default {
setup() {
const router = useRouter();const navigateToPage = (path) => {
router.push(path);
};return {
navigateToPage
};
}
};
</script>

注意事项

• 确保在调用 useRouter 之前已经安装并配置了Vue Router。
• 路由跳转是异步操作，如果需要在路由跳转后执行某些操作，可以使用 router.push 返回的Promise。

使用命名路由和带参数的路由

// 使用命名路由
router.push({ name: 'user', params: { userId: 123 } });// 使用带查询参数的路由
router.push({ path: '/search', query: { keyword: 'Vue' } });

总结

在Vue3中，使用 useRouter 钩子可以很方便地在 setup 函数中实现路由跳转。这种方式使得路由逻辑与组件的其他逻辑分离，更加清晰和模块化。记得在跳转时处理好异步操作和参数传递。