nuxt 每個(gè)頁(yè)面head標(biāo)簽內(nèi)容設(shè)置方式
導(dǎo)讀
在前面幾節(jié)課程中，我們已經(jīng)完成對(duì)首頁(yè)，jokes查詢頁(yè)，About頁(yè)面的開發(fā)，接下來(lái)，我們來(lái)看一下每個(gè)頁(yè)面的head標(biāo)簽
內(nèi)容，我們會(huì)發(fā)現(xiàn)這三個(gè)頁(yè)面的標(biāo)簽一致，而且和nuxt.config.js配置文件的head配置保持一致；
所以我們需要對(duì)這三個(gè)頁(yè)面單獨(dú)做一個(gè)head，更加方便于SEO優(yōu)化，搜索引擎的爬??；
好，我們打開index.vue，編輯如下：
head(){
return {
title: 'jokes home page',
meta: [{
hid: "description",
name: "description",
content: "this is funny jokes home page"
},{
hid: 'viewport',
name: 'viewport',
content: 'width=device-width, initial-scale=1.0'
}]
}
},
我們?cè)俅未蜷_jokes.vue，編輯如下：
head(){
return {
title: 'jokes page',
meta: [{
hid: "description",
name: "description",
content: "funny jokes page"
}]
}
},
打開about.vue，編輯如下：
head(){
return {
title: 'about page',
meta: [{
hid: "page description",
name: "description",
content: "funny jokes about page"
}]
}
},
每次設(shè)置修改之后，我們都需要打開當(dāng)前頁(yè)面的源代碼查看一下，服務(wù)端渲染新head標(biāo)簽內(nèi)容是否生效。
補(bǔ)充知識(shí)：nuxt 為單獨(dú)的頁(yè)面或組件 注入js
代碼如下
head() {
return {
script: [
{
charset: 'utf-8',
src:'https://map.qq.com/api/js?v=2.exp&key=3',
body: true
},
{
type: 'text/javascript',
src: 'https://3gimg.qq.com/lightmap/api_v2/2/4/127/main.js',
body: true
},
{
type: 'text/javascript',
src:'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js',
body: true
}
]
}
},
由于地圖 只有在一個(gè)頁(yè)面使用, 沒必要全局引入,于是就在單個(gè)頁(yè)面使用
以上這篇nuxt 每個(gè)頁(yè)面head標(biāo)簽內(nèi)容設(shè)置方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁(yè)+輸入框關(guān)鍵字篩選功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁(yè)面引入的方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了解讀vue頁(yè)面監(jiān)聽store值改變問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue前端利用slice()方法實(shí)現(xiàn)分頁(yè)器
分頁(yè)功能是常見的需求之一，本文主要介紹了Vue前端利用slice()方法實(shí)現(xiàn)分頁(yè)器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定，如何進(jìn)行綁定，如何進(jìn)行數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
開啟Vue項(xiàng)目缺少node_models包的問題及解決
這篇文章主要介紹了開啟Vue項(xiàng)目缺少node_models包的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析
這篇文章主要介紹了vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
本文給大家介紹Vue3中setup()函數(shù)中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開發(fā)方式,感興趣的朋友跟隨小編一起看看吧2023-11-11