客户端渲染 && 传统服务端渲染
客户端渲染: 将数据和页面从服务端请求到客户端进行渲染加载
服务端渲染: 客户端直接请求服务端渲染好的页面
客户端渲染过程: 请求localhost网页地址 --> 请求引用的js文件 --> 请求ajax数据 --> 加载页面
服务端渲染过程: 请求localhost网页地址 --> 加载页面
客户端渲染之后不利于SEO: 由于客户端渲染之后网页程序无法解析页面中引入的js,故得到的是空文件
服务端渲染之后程序获得到内容之后通过不同的标签权重提高SEO
同构渲染
首屏服务端渲染提高SEO和实现首屏直出,首屏客户端渲染用于接管页面交互。
Nuxt.js
基于Vue生态的第三方服务端渲染应用框架。
路由
Nuxt.js创建的项目通过项目结构自动设置路由规则。具体实现规则在.nuxt/router.js文件
- a标签刷新导航,走服务端渲染
- router-link导航链接组件
<router-link to="/">跳转</router-link>
- 编程式导航
<buttom @click = '$router.push('/')'>编程式导航</buttom>
异步数据asyncData方法
- 基本用法
- 会将asyncData返回的数据混入到组件中的data中。在服务端渲染期间和客户端路由更新之前调用
export default {
async asyncData(c){ //参数c中包含上下文对象
const data = axios({method:'GET',url:'aa/data.json'}) //接口中请求的数据
const id = c.params.id //路由参数
}
}
- 注意事项
- 只能在页面组件中使用,无法在公共组件中使用;由于在组件初始化之前调用因此没有this
转载:Vue版本区别
vue cli创建的项目默认使用vue的runtime版本。vue cli对webpack深度封装,可使用vue inspect > xxx.js
将配置导出到某一文件中查看。