nuxt 组件添加了一些特殊的配置项

asyncData

这个的出发时机实在服务器渲染的时候,生成html模型的时候,但是需要主要的是 他的环境是在node环境中也就是在服务器上,内部是node语法运行的。

fetch

这个就简单,他的出发时机实在服务器上,主要功能就是用来根据服务器环境来补充当前vue对象的组成属性,例如  

head

这个是补充当前页面的头部的mate标签之类的  比如 title meta之类的

 

 

 layout

定义当前页面的模板, 说到模板, 咋说呢 有点类似于vue框架中的slov标签,设定好的内容存放在写好的模板中的<nuxt />占位符上,模板本身的文件存放在layouts文件夹下,模板中的引入用layout属性(注意少个s) 直接填写模板文件名

 

 

 loading

这个就有点奇怪了  总的来说  他不是一个属性而是一个默认的组件,nuxt有默认的组件,使用方法就是内部调用this.$nuxt.$loading.start();

loading组件会包含2个方法 一个是start 一个是finish。 很通俗易懂吧。 默认的loading组件就是页面顶部出现一个加载的进度条,可以在nuxt.config.js中设置默认的颜色宽度之类的配置,或者自己实现一个loading组件,并在nuxt.config.js配置文件中loading属性中配置路径!

 

 

 

 

 

 validate

这个属性有点像是判断当前页面是否可以正常渲染,true就会正常渲染这个页面false的花则会跳转到404.  感觉有点鸡肋呢

 

 

middleware

 

 

路由中间键,有点像是vue中的router的before  作为路由出发前的事件理解就好了,结合vue中的跳转权限判断来理解!~~大概就是用来判断进入页面的权限问题的 要是有问题可以直接在这里执行跳转函数 redirect 可以直接跳转界面

 

posted @ 2021-11-10 00:09  blurs  阅读(267)  评论(0编辑  收藏  举报