Nuxtjs使用经验

29 阅读1分钟

总结在开发过程遇到的坑,在此记录,避免以后再坑。

nuxtjs生命周期全景对比‌执行顺序

插件plugins下的文件行 -> 中间件middleware下的文件 -> 页面的asyncData方法 -> 服务端运行vue的created方法 -> 客户端vue原来的的生命周期代码

‌服务器端生命周期流程‌:Nuxt插件 → 路由中间件 -> 页面的asyncData方法 -> vue的created方法

客户端流程‌:插件在应用初始化时执行,中间件仅在路由切换时触发

中间件

中间件(包括全局、布局和页面级中间件)在路由处理阶段执行,用于拦截请求或处理权限验证等逻辑。其执行时机明显晚于插件,具体顺序为:路由验证 → 全局中间件 → 页面中间件

在以后可以使用中间件来实现网站主题切换、多语言切换、权限验证、数据预取等。

在vue文件中

created生命方法也会在服务端中执行

glugins插件

注意点: plugins要注意顺序,一般设置授权token的,要放数组第一

nuxt-link标签注意问题

使用nuxt-link标签跳转页面时,尽管跳转到新的页面,跳转前的页面如果有未加载完的图片,还会继续加载,浪费流量(特别是商城很多商品图片要加载)。这时建议使用原来的a标签进行跳转。