vue3实现跳转
vue3 实现页面跳转的方法
在 Vue3 中，页面跳转可以通过多种方式实现，主要依赖于 Vue Router。以下是几种常见的跳转方式：
使用 <router-link> 组件
通过声明式导航实现跳转，适合模板中使用：
<router-link to="/about">跳转到关于页面</router-link>编程式导航
通过调用 router 实例的方法实现跳转：
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转到指定路径
router.push('/about')
// 带参数跳转
router.push({ path: '/user', query: { id: '123' } })
// 命名路由跳转
router.push({ name: 'user', params: { userId: '123' } })替换当前路由
不保留当前路由历史记录：
router.replace('/login')前进/后退
控制浏览器历史记录：
router.go(1) // 前进
router.go(-1) // 后退路由传参方式
query 传参
参数会显示在 URL 中：
router.push({ path: '/user', query: { name: 'John' } })params 传参
需要先在路由配置中定义：
// 路由配置
{
path: '/user/:id',
name: 'user',
component: User
}
// 跳转时
router.push({ name: 'user', params: { id: 123 } })获取路由参数
在目标组件中获取传递的参数：
import { useRoute } from 'vue-router'
const route = useRoute()
// 获取 query 参数
console.log(route.query.id)
// 获取 params 参数
console.log(route.params.id)导航守卫
可以在跳转前后执行特定逻辑：
router.beforeEach((to, from, next) => {
// 跳转前逻辑
next()
})
router.afterEach((to, from) => {
// 跳转后逻辑
})动态路由跳转
根据条件动态生成路由路径：
const userId = 123
router.push(`/user/${userId}`)注意事项
- 使用
params传参时，必须使用命名路由 - 编程式导航方法返回 Promise，可以处理导航结果
- 路由配置中需要正确定义路径和组件映射关系
- 在 setup 函数中需要使用
useRouter和useRoute替代this.$router和this.$route
