先从目录构造上介绍
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优先级在中间件前面，留神，肯定要加个路由的判断，不然你跳不到其余子路由
你也能够用中间件来实现，成果一样