<template> <div> <header> <h2>I am header</h2> </header> <main> <nuxt /> </main> <footer> <h2>I am footer</h2> </footer> </div> </template>
然后我们在 pages 下新建文件 layoutDemo.vue
<template> <div> <h1>I am layout demo</h1> </div> </template> <script> export default { layout: 'myLayout' } </script>
访问 localhost:3000/layoutDemo，布局效果如下：
使用中间件
例如我们实现一个未登录拦截跳转的中间件：
在 middleware 中新建 auth.js
export default function (ctx) { // eslint-disable-next-line no-constant-condition if (true) { // ctx 判断得到未登录 ctx.redirect({ path: 'https://www.jb51.net/' }) } }
再在 layoutDemo.vue 中加上 middleware: 'auth' ，这样访问该页面就会拦截跳转回主页面。
用 asyncData 实现 ssr
我们再在 pages 中新建页面 ssr1.vue
<template> <div> <ul> <li v-for="item of list1" :key="item"> {{ item }} </li> </ul> <ul> <li v-for="item of list2" :key="item"> {{ item }} </li> </ul> </div> </template> <script> export default { layout: 'myLayout', data () { return { list1: [] } }, async created () { const { status, data: { list } } = await this.$axios.get('/list') if (status === 200) { this.list = list } }, async asyncDate () { const { status, data: { list } } = await this.$axios.get('/list') if (status === 200) { return { list2: list } } } } </script>
这里我们 list1 是用传统的 vue 方式获取异步数据， list2 用 asyncData 获取异步数据
然后我们在 server 中写接口，应为 node 还是采用 require 的方式，如果我们想使用 import 的方式，可以安装 babel-cli 和 babel-preset-env , 新建配置文件 .babelrc:
{ "presets": ["env"] }
然后在 package.json 里将 dev 命令加上后缀 --exec babel-node , server 中书写 node 就可以使用 import 了。
然后安装 koa-router，在 index.js 里加入以下代码：
import Router from 'koa-router' // 以下代码加在 start 函数内的 原有的 app.use 之前 const router = new Router() router.get('/list', (ctx) => { ctx.body = { list: ['a', 'b', 'c'] } }) app.use(router.routes()).use(router.allowedMethods())
然后访问页面，两个列表都正常渲染
我们右键查看源代码：
list2 通过 asyncData 的方式实现了 ssr。
使用 nuxtServerInit 实现 ssr
我们新建页面 ssr2.vue
<template> <div> <ul> <li v-for="item of $store.state.list" :key="item"> {{ item }} </li> </ul> </div> </template> <script> export default { layout: 'myLayout' } </script>
然后在 store 中新建 index.js
export const state = () => ({ list: [] }) export const mutations = { setList (state, value) { state.list = value } } export const actions = { async nuxtServerInit ({ commit }, { app }) { const { status, data: { list } } = await this.$axios.get('/list') if (status === 200) { commit('setList', list) } } }
重新 npm run dev, 访问 localhost:3000/ssr2
查看源代码，也正确渲染