本帖最后由 谷粒姐姐 于 2019-5-28 15:05 编辑
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
| 
收藏
淘帖
踩
