Nuxt 每个页面单独设置head标签内容

知识储备（了解即可，可略过）

参考：官网
在这里插入图片描述

参考：https://www.jianshu.com/p/14ef958b0e8b

当前，SPA越来越无法满足业务对页面响应速度的要求。随着工程不断变大，打包文件不断增长，页面的整体刷新加载速度慢慢成为瓶颈。

越来越多的应用开始使用SSR来提高响应速度。
SSR是英文server side render的缩写，即服务端描画。

之前在SPA单页的时候，mouted元素部分，都是先去服务端拉取js脚本，然后客户端解析成html。而在SSR下，mouted部分是服务端描画好后，直接发送到客户端，客户端不用进行html的重新组合，只需要激活即可。

在这里插入图片描述
Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的UI渲染。

它既支持预渲染也支持SSR。

SSR的优点无非两个，一个是对SEO友好，二就是更快的内容到达时间。

所以在使用SSR的第一个场景，必然是对响应速度有较高的要求

但同时也会有更高的瓶颈点和风险。主要有下面几个：

更长的链路，之前是浏览器+nginx+后台服务，而现在就变成浏览器+nginx+nodejs+后台服务。

nodejs中的阻塞型请求，容易成为性能的瓶颈。

一套api，要考虑前后端的兼容性

参考：https://www.jianshu.com/p/c9d45673d306

在传统页面中，我们可以把vuex保存在sessionStorage中，但是Nuxt.js使用的是服务端渲染，因此并不存在window对象。

req，是请求对象，里面存在header，我们的cookie就会保存在里面。

正文

运营那边的需求是：我写的那五个页面，每个页面都需要不一样的title和description。。。。

我帅气的老大把head的一些设置放在一个全局的配置文件，也就是说所有的页面都会显示。

在这里插入图片描述

为什么要对每一个页面单独做一个head

为了更加方便于SEO优化，搜索引擎的爬取。

于是我就去看了官网：https://www.nuxtjs.cn/guide

在这里插入图片描述
在指导下发现了：原来在每个页面都有特殊的配置项：

这样我们就可以在我们的script标签下设置head啦~
在这里插入图片描述

刚开始我在每个页面的script标签里面是这么设置的：

1
2
3
4
5

head: {
title: 'hls',
description:
'啦啦啦啦',
},

但是我发现title生效了，但是content没有生效。

在这里插入图片描述
后来参考了一篇文章，修改为如下代码就成功了：

1
2
3
4
5
6
7
8
9
10

head(){
return {
title: 'hls',
meta: [{
hid: "description",
name: "description",
content: '啦啦啦啦'
}]
}
},

在这里插入图片描述
因为我这个是Nuxt，比较特殊，在script标签里面可以设置head。

如果是单纯的Vue，应该是写进路由里面然后通过router.beforeEach来监听修改。

参考：vue 设置每个页面的title
在这里插入图片描述

1
2
3
4
5
6
7

router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})