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

122次阅读

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

正文完
 0