Java的新项目学成在线笔记-day12（五）-白红宇

Java的新项目学成在线笔记-day12（五）

阅读量：6121 次

发布时间：2019-06-21

本文共 995 字，大约阅读时间需要 3 分钟。

3.4.2 嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

别忘了在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。

假设文件结构如：

[mw_shl_code=applescript,true]pages/‐‐| user/‐‐‐‐‐| _id.vue ‐‐‐‐‐| index.vue‐‐| user.vue[/mw_shl_code]Nuxt.js 自动生成的路由配置如下：[mw_shl_code=applescript,true]router: {   routes: [     {       path: '/user',       component: 'pages/user.vue',       children: [         {           path: '',           component: 'pages/user/index.vue',           name: 'user'         },         {           path: ':id',           component: 'pages/user/_id.vue',           name: 'user‐id'         }      ]     }   ] }[/mw_shl_code]将user.vue文件创建到与user目录的父目录下，即和user目录保持平级。[mw_shl_code=applescript,true]
       [/mw_shl_code]_id.vue页面实现了向页面传入id参数，页面内容如下：[mw_shl_code=applescript,true]
      [/mw_shl_code]