import axios from 'axios'; router.beforeRouteEnter((to, from, next) => { axios.get(`/api${to.path}`).then(({ data }) => { next(vm => Object.assign(vm.$data, data)) }); })
优点
使UI更可预测。
缺点
总体来说，直到所有数据准备就绪了 ,页面才能呈现。
如果不使用路线，这模式没有太多的帮助。
奖金模式：将第一个AJAX调用的服务器渲染到页面中
建议在初始页面加载时使用AJAX来检索应用程序状态，因为它需要额外的往返服务器，这将延迟应用程序的渲染。
相反，将初始应用程序状态注入HTML页面的内联脚本中，以便应用程序作为全局变量在需要时可用。
<html> ... <head> ... <script type="text/javascript"> window.__INITIAL_STATE__ = '{ "data": [ ... ] }'; </script> </head> <body> <div></div> </body> </html>
然后，AJAX可以更适合地用于后续数据提取。