DAY５ 起手式--Nuxt.js(细)说pages(下)

layout 属性

我们可以使用 layout 属性来套用放置於 layouts 的布局。

export default {
  layout: 'FrontEnd',
  // 或
  layout(context) {
    return 'FrontEnd'
  }
}

关於 layouts 可洽此系列文DAY2 起手式--Nuxt.js目录结构

loading 属性

Nuxt.js 送我们免费的进度条，在页面切换的时候，Nuxt.js 使用内置的加载组件显示。
我们可以在 pages 元件的 loading 决定我们是否要启用他。
预设值是 true ，如有特定页面不想使用，就可以自行设定成 false 。
如果所有页面都不想启用的话，请洽 nuxt.config.js

module.exports = {
  loading: false
}

那我们又要如何使用呢？非常简单。

• 启动　this.$nuxt.$loading.start()
• 结束　this.$nuxt.$loading.finish()

范例如下

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

温馨提醒：
如果要在 mounted 方法中启动它，请确保使用 this.$nextTick 来调用它，因为 $loading 可能无法立即使用。

客制化样式

免费送的进度条，还可以自己客制化样式，想要调整颜色或尺寸，一样请洽 nuxt.config.js
例如想要改成蓝色，高度 5px 都没有问题！

module.exports = {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

自干样式

什麽？你觉得免费的很丑不喜欢，没关系我们可以自己刻一个，没问题！
首先我们需要在 components 目录下创建自定义的加载组件，如 components/loading.vue。
接着这个元件可以透过几种方法了解 loading 状态作使用，最简单的两种方法

• start() ：路由更新时，进度条该出来上工了。
• finish()：路由更新完毕时，进度条就放工了。

直接上基本配置范例，欢迎自行新增样式。

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

最後最後，记得要通知 nuxt.config.js 一声，我们要换成自己的 loading 元件罗！

module.exports = {
  loading: '~/components/loading.vue'
}

middleware 属性

还记得系列文DAY2 起手式--Nuxt.js目录结构我们提过的 middleware 资料夹吗？
没错，就是拿来放验证的那个！
其实不管是 layouts 、 pages 、 components 的页面，都可以绑验证。
执行的顺序也是由大到小，所以会依照 layouts 、 pages 、 components 的顺序执行。

那到底要验证什麽？要怎麽做呢？

例如我们转跳到结帐页面前，需验证使用者是否已登入帐号，那我们就可以在 middleware 写好一个登入验证，验证使用者是否已登入，若没登入就给我回去login登入吧！
middleware/authenticated.js

export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

之後在结帐页面元件，使用 middleware 属性绑定刚刚写好的验证档案即可。

export default {
    middleware: 'authenticated'
  }

scrollToTop 属性

Nuxt.js 满贴心的，切换页面的时候会自己帮我们把页面滚动到顶部，但如果是嵌套子路由就不滚了。
所以如果想要滚、或不想要滚，都没问题，直接在 scrollToTop 改就可以了。

export default {
    scrollToTop: true
  }

validate 方法

有用到动态路由的话，就一定会有动态路由参数，可不可以判断参数是否有效呢？
我们可以透过 validate 方法来做验证。

export default {
  validate({ params, query, store }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

return 值有两种可使用

• true ：　参数有效，没毛病。
• false ：　参数有病，停止渲染跳404送你离开千里之外。

watchQuery 属性key 属性

结语

老实说还有三个没提到的属性，研究了一下还是不甚了解，想想还是先不提，我们先欠着好吗？
如果未来有想明白了，或许我还是可以回来补充说明一下。