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

3.4.2 嵌套路由 
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。 创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如：
 

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5

pages/  ‐‐| user/  ‐‐‐‐‐| _id.vue ‐‐‐‐‐| index.vue  ‐‐| user.vue

Nuxt.js 自动生成的路由配置如下：
 

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

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'         }       ]     }   ] }

将user.vue文件创建到与user目录的父目录下，即和user目录保持平级。
 

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7 8

<template>   <div>     用户管理导航，<nuxt‐link :to="'/user/101'">修改</nuxt‐link>     <nuxt‐child/>   </div> </template> <script>   export default{     layout:"test"   }   </script> <style>

 

[AppleScript] 纯文本查看 复制代码

?

1

</style>

_id.vue页面实现了向页面传入id参数，页面内容如下：
 

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

<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>