您的位置 首页 > 数码极客

nufronteuht如何使用

Nuxt.js对于网页的SEO是及其有帮助的,它在服务端将页面渲染好以后在展示在前端。如果想要使用好Nunxt那么就必须搞明白那些方法是在服务器端就开始运行的,哪些是在客户端运行的,简单点说,就是哪些是在服务器上跑的,哪些是在前端浏览器上跑的。

先看下官方给出的流程图

首先是IncomingRequest 就是从客户端发起请求,直白点说就是你打开了网页,那么网页就要向服务器发起请求了

然后就开始执行nuxtServerInit 可以理解为服务初始化,很多人不知道nuxtServerInit用在哪里使用其实他是在strore文件夹下的 vuex文件actions中进行数据、状态初始化的,比如:

export const state = () => ({ datas:{}, }) export const getters = { getInitData(state,post){ return } } export const mutations = { setInitData(state, gets) { = gets } } export const actions = { //数据初始化方法 async nuxtServerInit(vuexContent, context) { let datas = await context.$axios.get'/ap/xxxx') ; vuexCon("setInitData", da) } }

然后就是middleware 中间件的执行,如果你需要的话,就在middleware文件夹下编写代码,中间件会在页面显示之前调用。

nuxt的middleware经常用来处理页面加载前的一些逻辑,比如判断一下访问你页面的家伙有没有登录啊,有没有观看权限什么的,都在这里处理比较合适。

然后就到了validate验证阶段,当然如果你写过的话,验证一下路由格式是不是匹配啊什么的,如果不匹配就跳转到提示页面去。

终于到了asyncData&fetch 这两个货就是在页面展示之前从服务器端获取数据用的,他不是在客户端执行的,也就是说这两个方法不在在网页上执行的,所以他们不会有跨域的问题,也不可能访问到window

拿到数据后当然是要去渲染到页面上了render数据到.vue页面上然后我们就看到页面了。注意一下画红框的部分,nuxt-link是nuxt的页面路由,比如我们从/index 页面上写一个

<nuxt-link to="/about">about</nuxt-link>

那么我们就会跳转到about页面,同时asyncData方法就会执行,获取数据

但是如果我们已经在about页面了。然后在about页面上添加以下代码它的作用只是给about路由传参

<nuxt-link to="/about?id=1">about</nuxt-link>

那么你觉的asyncData方法还会执行吗?

no,它不会在执行了,那个货很懒,他只在首次加载的时候执行一次。

欢迎交流指正

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“nufronteuht如何使用”边界阅读