共计 780 个字符,预计需要花费 2 分钟才能阅读完成。
因为公司官网 SEO 优化问题,必须要用服务端渲染,prerender-spa-plugin 预渲染插件不能满足需求。在此记录整理,Nuxt 开发服务端渲染项目时遇到的问题难点(不定时更新)
1、掘金上有一些很不错的 Nuxt 教程文章,推荐几篇:
https://juejin.im/post/58ff96…
https://juejin.im/post/5bd3fb…
https://juejin.im/post/5cc81e…
https://www.jianshu.com/p/840…
2、在使用 window 对象时,页面有时会报错 window is not defined,解决方法:
// 用 process.client 判断是否客户端,包着 window 对象的代码就行
if (process.client) {}
3、vue-cli 创建的项目,即客户端渲染,在详情页类型的文章页面中,如果右侧列表有同类型的文章,那么在点击跳转路由时,需要用到 beforeRouteUpdate,判断 from 来源是不是本路由,是的话则把详情 id 更新为 to 路由对象里的 id 即可,参考 Vue Router 官方文档:https://router.vuejs.org/zh/g…
// 我的代码是这样
beforeRouteUpdate(to, from, next){next();
// console.log(to, from, next)
if(from.path.indexOf('NewsDetails') != -1){
this.newsId = to.params.newsId;
// 更新新闻资讯详情数据
this.getNewsDetailsData();}
},
而 Nuxt 服务端渲染的项目,我做到这个功能点时,发现不需要写 beforeRouteUpdate 路由钩子,处理判断,页面也能正常跳转展示正确的数据。
正文完