Vue处事器端渲染nuxt.js初探

必要在 assets/目次下建设 main.css 添加全局样式。

.page-enter-active, .page-leave-active {  
transition: opacity .5s;  
}  
.page-enter, .page-leave-active {  
opacity: 0;  
}  

然后添加到 nuxt.config.js 文件中：

module.exports = {  
css: [  
'assets/main.css'  
],  
loading: { color: '#2152F3' },  
}  

更多过渡结果： https://zh.nuxtjs.org/guide/routing#过渡动效

头部信息 (Meta 标签 ，全局样式)

nuxt.config.js 里界说应用所需的全部默认 meta 标签

head: {  
meta: [  
{ charset: 'utf-8' },  
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }  
{ hid: 'description', name: 'description', content: '' }  
],  
link: [ // 这里可以引用全局的样式，可是会默认走根目次  
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }  
{ rel: 'stylesheet', href: '～/static/common.js' } // 文件一样平常都放在static目次下  
]  
}  

详细参考：https://zh.nuxtjs.org/api/configuration-head

异步数据 (asyncData要领，限于page页面组件，components中不合用)

这里包罗 asyncData钩子 / fetch 钩子 / 。。。

【fetch】 用于在渲染页眼前添补应用的状态树(store)数据， 与 asyncData 要领相同，差异的是它不会配置组件的数据

【asyncData】 首要用于哀求ajax 添补data中的数据

每次加载之前被挪用。它可以在处事端或路由更新之前被挪用。

asyncData ({ params }) {  
return axios.get(`https://my-api/posts/${params.id}`) 
.then((res) => {  
// 赋值给页面 data中的数据  
return { title: res.data.title }  
})  
}  

可能调动为同步哀求：

async asyncData() {  
let formData = {}  
let ajaxData = await axios({  
method: "post",  
url: url,  
data: qs.stringify(formData),  
retryDelay : 1000,  
withCredentials : true,  
responseType : 'json',  
timeout : 60000,  
'Content-Type' : 'application/x-www-form-urlencoded'  
})  
}  

留意添加 catch

留意：

这个异步哀求函数， 第一次执行情形为node情形中，也就是处事器端，后续革新页面则执行情形为client 客户端

当地开拓时，假如在客户端直接哀求完备路径时会常常碰着跨域题目，以是必要在 asyncData 中区分情形变量

process.env.VUE_ENV 区分 是server 照旧 client

然后按照差异的情形设置差异的 url ， 而且在 client时， 必要做处事器端署理哀求，必要给url增进一层署理标识

譬喻：client情形中

url = '/api' + '/get-user-info';  
nuxt.config.js 中  
/*  
** 处理赏罚署理跨域题目  
*/  
axios: {  
proxy: true,  
prefix: '/api', // 增进哀求标识  
credentials: true,  
},  
proxy: {  
'/api': {  
// 署理地点  
target: (process.env.NODE_ENV == 'production') ?'http://test.' : 'http://www.' ,  
changeOrigin: true,  
pathRewrite: {  
'^/api': '' // 将标识 替代为 ‘’  
},  
},  
}  

错误处理赏罚 :

context中提供了一个 error(params) 要领，你可以通过挪用该要领来表现错误信息页面。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!