先从目录构造上介绍

1 layout文件夹

放的是布局组件，了解成一个.vue文件，外面有slot，页面用的时候嵌套
然而nuxt应用就不必，只有在页面那里配置一个layout:’这个名字是vue文件的名字，不是name’

例子

page在用的时候

<template>
  <div>
    <div>这里输入两头内容局部</div>
    <gaogezujian></gaogezujian>
  </div>
</template>

<script>
export default {
  name: 'home',
  layout: 'demo', // 这个是vue文件名，不是name值
  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>

2 components文件夹

外面是组件，就是vue的那种，主动全局注册了，在nuxt.config配置，components:true
用的时候

留神也是文件名，不是name的值

3 middleware文件夹

外面是放一些会全局作用的js办法之类，能够类比为router路由的before，after那些钩子，它是有一个执行程序
也能够作用页面，组件，在外面写一个属性

export default {
  name: 'MynuxtssrFa',
  middleware: 'fa',
  data() {
    return {
      
    };
  },

1 nuxt.config.js
2 匹配的布局
3 匹配的页面

export default () => {
  return new Promise((res,rej) => {
    console.log('申请接口中')
    
    setTimeout(() => {
      console.log('5秒后')
      res()
    },5000)
  })
}

导出一个函数，外面申请接口，res之后才会进入页面，跟vue的路由拦挡是一摸一样的

写了后还要配置，在nuxt.config

router: {
    middleware: 'auth',
  },

而后它函数参数那里有几个值，比方

export default ({ app, $axios, store, error, redirect, req }) => {
  return new Promise((res,rej) => {
    console.log('申请接口中')
    
    setTimeout(() => {
      console.log('5秒后')
      res()
    },5000)
  })
}

这个值的参考，网上查了下，要看.nuxt文件夹(这个前面再说这个是啥，当初看起来像打包后的文件，也就是说，它的run dev开发模式是每更新代码，它都会打包一次)的indexjs

await setContext(app, {
    route,
    next,
    error: app.nuxt.error.bind(app),
    payload: ssrContext ? ssrContext.payload : undefined,
    req: ssrContext ? ssrContext.req : undefined,
    res: ssrContext ? ssrContext.res : undefined,
    beforeRenderFns: ssrContext ? ssrContext.beforeRenderFns : undefined,
    ssrContext
  })

还有一些没加在这里的，都是在某些的中央加上去，所以这里没有一个全的,比方$axios，redirect

4 pages

顾名思义，页面，nuxt机制会主动帮你把文件夹上面的文件都写进router外面， 能够在.nuxt文件夹看的进去，上面说一下某些写法

嵌套路由

如何搞一个有children那种的,要这样

要用一个跟文件夹同名的vue文件，比方截图那个fa，这样生成进去的router长这样

而后就失常在父组件写一个进口，用他封装的<nuxt-child></nuxt-child>,跟vue的router-view一样

<template>
  <div>
    <p>嵌套路由父</p>
    <nuxt-child></nuxt-child>
  </div>
</template>

然而能够看到，router那里没有redirect，网上找了下，倡议这样写

export default {
  name: 'MynuxtssrFa',
  middleware: 'fa',
  asyncData({ redirect,route }) {
    if(route.fullPath  === '/fa'){
      redirect('/fa/child1')
    }
  },
  data() {
    return {
      
    };
  },

这个asyncDatap优先级在中间件前面，留神，肯定要加个路由的判断，不然你跳不到其余子路由
你也能够用中间件来实现，成果一样

5 plugins