在 `setup` 函数中实现路由跳转：Vue3与Vue Router 4的集成
🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
- 使用 `useRouter`
- 示例
- 注意事项
- 使用命名路由和带参数的路由
- 总结
在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 函数中实现路由跳转。这种方式使得路由逻辑与组件的其他逻辑分离，更加清晰和模块化。记得在跳转时处理好异步操作和参数传递。