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]<template>
  <div>  
   用户管理导航，<nuxt‐link :to="'/user/101'">修改</nuxt‐link>
    <nuxt‐child/>
  </div> </template> <script>  
export default{  
   layout:"test"   }  
</script> <style> [/mw_shl_code]
[mw_shl_code=applescript,true]</style> [/mw_shl_code]
_id.vue页面实现了向页面传入id参数，页面内容如下：

[mw_shl_code=applescript,true]<template>  
<div>  
    修改用户信息{{id}}  
</div> </template> <script>
  export default{     
layout:"test",   
  data(){   
     return {      
       id:''     
    }   
},   
  mounted(){   
   this.id = this.$route.params.id;   
   console.log(this.id)  
   }
  }
  </script> <style>  
</style>[/mw_shl_code]

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]<template>
  <div>  
   用户管理导航，<nuxt‐link :to="'/user/101'">修改</nuxt‐link>
    <nuxt‐child/>
  </div> </template> <script>  
export default{  
   layout:"test"   }  
</script> <style> [/mw_shl_code]
[mw_shl_code=applescript,true]</style> [/mw_shl_code]
_id.vue页面实现了向页面传入id参数，页面内容如下：

[mw_shl_code=applescript,true]<template>  
<div>  
    修改用户信息{{id}}  
</div> </template> <script>
  export default{     
layout:"test",   
  data(){   
     return {      
       id:''     
    }   
},   
  mounted(){   
   this.id = this.$route.params.id;   
   console.log(this.id)  
   }
  }
  </script> <style>  
</style>[/mw_shl_code]