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

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

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

?

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

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

?

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

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

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

?

1 2 3 4 5

router: {   routes: [     {       name: 'user',       path: '/user',

 

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

?

1 2 3 4 5 6

component: 'pages/user/index.vue'     },    {      name: 'user‐one',      path: '/user/one',      component: 'pages/user/one.vue'    }   ] }

index.vue代码如下：
 

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

?

1 2 3 4 5 6

<template>   <div>     用户管理首页   </div> </template> <script> export default{    layout:"test" } </script> <style>   </style>

one.vue代码如下：
 

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

?

1 2 3 4 5 6

<template>    <div>     one页面   </div> </template> <script> export default{    layout:"test" } </script> <style>   </style>

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