一篇学会 - Vue ssr 框架 Nuxt 项目 动态路由、嵌套路由、动态嵌套路由 CSDN 官网 实例（详细解读）

Vue ssr Nuxt 框架 嵌套 动态 路由 详解

动态路由

Nuxt 默认 自动生成 pages 下文件 作为路由结构

目录结构

效果

嵌套路由

项目结构

---

解析：home.vue 组件 为父组件 默认入口 子组件存放在 home 文件下
index.vue 为父组件必选组件 （命名为_index.vue）为可选组件

可选组件 必选组件 深入理解:

必选组件：访问 /example/home/默认展示index.vue 内容

可选组件：访问 /example/home/默认展示 home.vue组件内容 （实现子组件路由）

实例

设置 非必选组件 通过 home.vue 实现组件路由

目录结构

home.vue

---

解析： 通过 此种目录结构 方式定义路由 可以直接操控子组件显示 布局，样式等 更直观体现组件效果

nuxt-child 路由展示子组件

注意：定义 必要组件(index.vue) 将无法体现 home.vue 父子路由效果

效果

动态嵌套路由

---

解析：Router 1=>控制 View1
View1 =>包含 Route 2 View2
Router 2 =>控制 View 2

目录结构

---

解析：目录结构和方式 嵌套路由 相似

实例

home.vue

---

解析： 增加 menu 组件 home_menu 路由
home_menu 为 home 子组件 => menu 入口
menu入口 =>路由 menu 子组件

menu.vue

效果

总结：

---

新手入门 比较容易出错的几个地方：

嵌套路由显示内容和结构不否： 是否命名为必选组件

嵌套路由直接展示子组件页面：子组件是否定义规范，是否在父组件目录下

路由访问提示地址不存在：:to=‘{name:’’}’ 配置name 属性 还是 path 属性

---

源码地址

https://github.com/ForeverWx/nuxt-router-example