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