服务端渲染Node层直接获取数据
在Egg项目如果使用模板引擎规范时通是过render方法进行模板渲染，render的第一个参数模板路径，第二个参数时模板渲染数据.如如下调用方式：
从上面的例子可以看出，这种使用方式是非常典型的也容易理解的模板渲染方式。在实际业务开发时，对于常规的页面渲染也建议使用这种方式获取数据没，然后进行页面渲染。Node获取数据后，在Vue的根Vue文件里面就可以通过this.list的方式拿到Node获取的数据，然后就可以进行vue模板文件数据绑定了。
在这里有个高阶用法，可以直接把ctx等Node对象传递到第二个参数里面,这个时候你在模板里面就直接拿到ctx这些对象。但这个时候就需要自己处理好SSR渲染时导致的hydrate问题，因为前端hydrate时并没有ctx对象。
服务端渲染asyncData方式获取数据
在Vue单页面SSR时涉及数据的请求方式，Node层获取数据方式可以继续使用，但当路由切换时(页面直接刷新)，Node层就需要根据路由获取不同页面的数据，同时还要考虑前端路由切换的情况，这个时候路由是不会走Node层路由，而是直接进行的前端路由，这个时候也要考虑数据的请求方式。
基于以上使用的优雅问题，这里提供一种asyncData获取数据的方式解决单页面SSR刷新不走SSR问题。Node不直接获取数据，获取数据的代码直接写到前端代码里面。这里需要解决如下两个问题：
前端路由匹配asyncData调用
这里根据路由切换url获取指定的路由componet组件，然后检查是否有aysncData，如果有就进行调用。调用之后，数据会放到Vuex的store里面。
Vue模板定义asyncData方法
前端通过Vuex进行数据管理，把数据统一放到store里面，前端通过this.$store.state方式可以获取数据，Node和前端都可以获取到。
前端asyncData数据统一调用
在服务端asyncData调用时，可以解决单页面SSR刷新问题，那直接在前端切换路由时因不走服务端路由，那数据如何处理？
在Vue单页面实现时，通常都会使用Vue-Router，这个时候可以借助Vue-Router提供afterEach钩子进行统一数据请求，可以直接调用Vue模板定义的asyncData方法。代码如下：
最后贴上可以用的完整代码，请根据实际需要进行修改,实际可运行例子见https://github.com/easy-team/egg-vue-webpack-boilerplate/tree/feature/green/spa
Vue页面初始化统一封装
页面入口代码
前端router/store定义
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。