Vue 嵌套路由怎么处理路由重定向到嵌套子路由的场景

千涛大大_8368

千涛大大_8368

2026-10-21

732人浏览

原创

嵌套路由重定向的核心逻辑是父路由访问时默认跳转至其合法子路由,必须显式写全路径(如'/about/index')并确保该子路由已声明在children中,避免相对跳转导致404。

vue 嵌套路由怎么处理路由重定向到嵌套子路由的场景

嵌套路由重定向的核心逻辑

当父路由本身可被直接访问(比如 /about),但你希望用户进入该路径时默认看到某个子页面(如 /about/index),而不是空白或仅父组件内容,就需要配置重定向。这种重定向不是跳到一级路由,而是跳进嵌套结构内部,关键在于:重定向目标必须是合法的子路由完整路径,且不能脱离父级上下文。

正确配置嵌套路由重定向的方式

在父路由的 routes 配置中,使用 redirect 字段指向子路由的完整路径(含父前缀),同时确保该子路由已定义在 children 数组里:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习