记录使用Nuxt开发服务端渲染项目时遇到的问题难点整理不定时更新

jiezi

5 年前

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 路由钩子，处理判断，页面也能正常跳转展示正确的数据。

因为公司官网 SEO 优化问题，必须要用服务端渲染，prerender-spa-plugin 预渲染插件不能满足需求。在此记录整理，Nuxt 开发服务端渲染项目时遇到的问题难点（不定时更新）