总结在开发过程遇到的坑,在此记录,避免以后再坑。
nuxtjs生命周期全景对比执行顺序
插件plugins下的文件行 -> 中间件middleware下的文件 -> 页面的asyncData方法 -> 服务端运行vue的created方法 -> 客户端vue原来的的生命周期代码
服务器端生命周期流程:Nuxt插件 → 路由中间件 -> 页面的asyncData方法 -> vue的created方法
客户端流程:插件在应用初始化时执行,中间件仅在路由切换时触发
中间件
中间件(包括全局、布局和页面级中间件)在路由处理阶段执行,用于拦截请求或处理权限验证等逻辑。其执行时机明显晚于插件,具体顺序为:路由验证 → 全局中间件 → 页面中间件
在以后可以使用中间件来实现网站主题切换、多语言切换、权限验证、数据预取等。
在vue文件中
created生命方法也会在服务端中执行
glugins插件
注意点: plugins要注意顺序,一般设置授权token的,要放数组第一
nuxt-link标签注意问题
使用nuxt-link标签跳转页面时,尽管跳转到新的页面,跳转前的页面如果有未加载完的图片,还会继续加载,浪费流量(特别是商城很多商品图片要加载)。这时建议使用原来的a标签进行跳转。