【Vue知识点总结】Vue如何实现跳转页面?

【Vue知识点总结】Vue如何实现跳转页面?

目录

一、Vue2页面跳转

方式一:使用 vue-router 进行编程式导航

方式二:使用 声明式导航

方式三:路由守卫中强制跳转

方式四:通过window.location跳转(不推荐)

常见问题

二、Vue3页面跳转

方式一:声明式导航 ( )

1. 基础跳转 (Path 方式)

2. 命名路由 (Name 方式)

3. 携带查询参数

补充:router-view 的使用

方式二:编程式导航 (useRouter)

1. 引入与初始化

2. router.push()

3. router.replace()

4. router.go(n)

方式三:获取路由参数 (useRoute)

最佳实践与常见误区

1. 自动解包

2. 动态路由的正则匹配

3. 保持响应式

在 Vue.js 中实现跳转到登录页是常见的需求,通常用于用户未登录token 失效等场景。

一、Vue2页面跳转

根据路由配置和项目结构,有以下几种实现方式:

方式一:使用 vue-router 进行编程式导航

如果项目使用了vue-router(推荐方式