现在项目需要做SEO , 因为是Vue项目,所以做了改造。利用node
服务端渲染,详见可点击此处。
问题来了,打包部署后,页面样式没了,或者是一加载页面是好的,但刷新下样式就没了。
部分代码如下:
export default {
// 请求后端数据
asyncData ( { store, route } ) {
return store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
},
}
苦恼了好久,终于找到了解决办法,就是在钩子函数mounted
里在延时请求数据即可,代码如下:
export default {
// 请求后端数据
asyncData ( { store, route } ) {
return store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
},
mounted () {
setTimeout( _ => {
this.$store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
}, 300)
}
}
有时也得先清空下状态里的数据,不然也会丢失样式,整体代码如下:
export default {
// 请求后端数据
asyncData ( { store, route } ) {
return store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
},
mounted () {
this.$store.state.commit('jt_index_list', []);
// 页面挂载后,再次请求后端数据
setTimeout( _ => {
this.$store.dispatch( 'jt_index', { pageSize: 10, pageNum: 1 } )
}, 300)
}
}
虽然原理还没搞明白为啥,但解决了 SEO的问题 和 样式丢失 的问题,欢饮大家留言~~~
网友评论