关于前端:nuxt的认识

放的是布局组件，了解成一个.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>

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

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

外面是放一些会全局作用的 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

顾名思义，页面，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 优先级在中间件前面，留神，肯定要加个路由的判断，不然你跳不到其余子路由
你也能够用中间件来实现，成果一样

关于前端:nuxt的认识

先从目录构造上介绍

1 layout 文件夹

2 components 文件夹

3 middleware 文件夹

4 pages

嵌套路由

5 plugins