前端/移动开发面试题更新 2026-08-05

请描述使用 Vue Router 完成页面重定向的具体做法有哪些?

前端/移动开发技术原理方案权衡VueVue Router

考察说明

考查对 Vue Router 重定向配置及用法的掌握程度

回答思路

  1. 【回答框架 1】Vue Router 实现重定向主要通过在路由配置中使用 redirect 字段,其值可以是路径字符串或函数,函数接收目标路由对象作为参数并返回重定向目标,适用于需要根据状态动态决定去向的场景。
  2. 【回答框架 2】此外可配置别名 alias,但别名不改变 URL 而重定向会改变,两者适用场景不同;组件内可使用 this.$router.replace 进行编程式重定向,它不产生历史记录,适合登录授权后跳转等场景。
  3. 【回答框架 3】重定向配置需要注意避免循环重定向,如 A 重定向到 B 且 B 重定向回 A 会导致异常;同时 redirect 与 children 以及命名路由的配合需要谨慎,确保路径与参数传递正确。
  4. 【回答框架 4】对于动态路由参数,重定向函数中可读取 to.params 以保留查询参数或传递额外参数;在全局前置守卫 beforeEach 中也能返回重定向路径,实现更细粒度的权限控制。
  5. 【回答框架 5】最终重定向是客户端路由层面的跳转,不会发起新的页面请求,URL 会更新,适合单页应用内页面替换场景。
  6. 【关键点 1】redirect 字段支持字符串路径和函数两种形式
  7. 【关键点 2】编程式重定向用 router.replace 避免历史记录叠加
  8. 【关键点 3】重定向需防止循环并注意参数传递与守卫配合
  9. 【易错点 1】将重定向与别名混淆,别名不会改变 URL
  10. 【易错点 2】在重定向函数中遗漏参数导致目标路由丢失动态段
  11. 【易错点 3】在全局守卫中返回重定向路径但未处理死循环风险