nuxt asyncData extendRoutes nuxtServerInit

材料来源 realworld 开源项目
asyncData 仅支持服务端，页面初始化，组件加载之前，不能this调用
案例
官方

nuxt.config.js

module.exports = {
  router: {
    linkActiveClass: 'active', // nuxt-link选中样式
    extendRoutes (routes, resolve) {
      routes.splice(0) // 清除默认路由 默认路由是根据pages下的文件夹创建的
      routes.push(
        ...[
          {
            path: '/',
            component: resolve(__dirname, 'pages/layout/'),
            children: [
              {
                name: 'home',
                path: '/',
                component: resolve(__dirname, 'pages/home/')
              },
              {
                name: 'settings',
                path: '/settings',
                component: resolve(__dirname, 'pages/settings/')
              }
            ]
          }
        ]
      )
    }
  }
}

store/index.js

// 在服务端渲染期间运行都是同一个实例
// 为了防止数据冲突，务必要把state 定义成一个函数，返回数据对象
// cookieparser 服务端cookie格式化包
const cookieparser = process.server ? require('cookieparser') : undefined
export const state = () => {
  return {
    user: null
  }
}
export const mutations = {
  setUser (state, data) {
    state.user = data
  }
}
export const actions = {
  // nuxtServerInit 服务端渲染自动调用，仅服务端，初始化数据
  nuxtServerInit({commit}, {req}) {
    let user = null
    if (req.headers.cookie) {
      const par =  cookieparser.parse(req.headers.cookie)
      try {
        user = JSON.parse(par.user)
      } catch (error) { 
        console.log('sdsdss+ user', error)
      }
    }
    commit('setUser', user)
  }
}

middleware/middle.js

// 中间键跳转逻辑
export default function({ store, redirect }) {
  console.log('dsdsdsd', store.state.user)
  if (store.state.user) {
    return redirect('/settings')
  }
}

对应vue文件

// 客户端第三方cookie包
<template>
<div>
//exact 路由全匹配。这里只匹配'/'
<nuxt-link class="nav-link" to="/" exact>Home</nuxt-link>
</div>
</template>
const Cookie = process.client ? require('js-cookie') : undefined
export default {
  // 中间键 跳转
  middleware: 'middle', // 对应middleware文件夹下的js名字
  name: 'Home',
  mounted() {
    this.toSave()
  },
  methods: {
    toSave() {
      Cookie.set('user', '3223232332')
    }
  }
}
</script>