黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day12（五） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-5-10 09:58
标题: 【郑州校区】Java的新项目学成在线笔记-day12（五）


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

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

pages/

 ‐‐| user/

 ‐‐‐‐‐| _id.vue 

‐‐‐‐‐| index.vue

 ‐‐| user.vue

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

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

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] 纯文本查看 复制代码

<template> 

  <div>  

   用户管理导航，<nuxt‐link :to="'/user/101'">修改</nuxt‐link> 

    <nuxt‐child/> 

  </div> </template> <script>  

 export default{  

   layout:"test"   }  

 </script> <style> 

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

</style> 

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

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

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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2