黑马程序员技术交流社区

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

---

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


3.3 页面布局
页面布局就是页面内容的整体结构，通过在layouts目录下添加布局文件来实现。在layouts 根目录下的所有文件都 属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。

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

 

  package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。   该文件名为Nuxt.js保留的，不可更改。  

一个例子：   1、定义：layouts/test.vue布局文件，如下： 注意：布局文件中一定要加 <nuxt/> 组件用于显示页面内容。 <template>   <div>     <div>这里是头</div>     <nuxt/>   

  <div>这里是尾</div> 

  </div> </template> <script> 

  export default {  

  }

</script> <style> </style>   

2、在pages目录创建user目录，并创建index.vue页面   在 pages/user/index.vue 页面里， 可以指定页面组件使用 test 布局，代码如下：  

 <template> 

  <div> 

  测试页面  

 </div> </template> <script> 

  export default{    

 layout:'test'   } </script> <style>

   </style>  

 3、测试，请求：http://localhost:10000/user，如果如下:  这里是头 测试页面 这里是尾 

3.4 路由
3.4.1 基础路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
Nuxt.js根据pages的目录结构及页面名称定义规范来生成路由，下边是一个基础路由的例子：
假设 pages 的目录结构如下：

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

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

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

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

router: {  

 routes: [ 

    {  

     name: 'user',

      path: '/user',

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

 component: 'pages/user/index.vue'     },  

   {    

   name: 'user‐one',   

    path: '/user/one',  

     component: 'pages/user/one.vue'    

 }   ] }

index.vue代码如下：

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

<template> 

  <div>   

  用户管理首页 

  </div> </template> <script> export default{   

 layout:"test" } </script> <style> 

  </style>

one.vue代码如下：

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

<template>

   <div>  

   one页面  

 </div> </template> <script> export default{  

  layout:"test" } </script> <style>  

 </style>

分别访问如下链接进行测试：
http://localhost:10000/user
http://localhost:10000/user/one  

---

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

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