服务端渲染及Vue版本控制

客户端渲染 && 传统服务端渲染

客户端渲染： 将数据和页面从服务端请求到客户端进行渲染加载
服务端渲染： 客户端直接请求服务端渲染好的页面
客户端渲染过程： 请求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方法

1. 基本用法

• 会将asyncData返回的数据混入到组件中的data中。在服务端渲染期间和客户端路由更新之前调用

export default {
  async asyncData(c){ //参数c中包含上下文对象
    const data = axios({method:'GET',url:'aa/data.json'}) //接口中请求的数据
    const id = c.params.id  //路由参数
  }
}

2. 注意事项

• 只能在页面组件中使用，无法在公共组件中使用；由于在组件初始化之前调用因此没有this
  转载：Vue版本区别
  vue cli创建的项目默认使用vue的runtime版本。vue cli对webpack深度封装，可使用vue inspect > xxx.js将配置导出到某一文件中查看。