【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（推荐方式