nuxt 每個頁面head標(biāo)簽內(nèi)容設(shè)置方式
更新時間：2020年11月05日 11:39:18 作者：我的小英短
這篇文章主要介紹了nuxt 每個頁面head標(biāo)簽內(nèi)容設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
導(dǎo)讀
在前面幾節(jié)課程中，我們已經(jīng)完成對首頁，jokes查詢頁，About頁面的開發(fā)，接下來，我們來看一下每個頁面的head標(biāo)簽
內(nèi)容，我們會發(fā)現(xiàn)這三個頁面的標(biāo)簽一致，而且和nuxt.config.js配置文件的head配置保持一致；
所以我們需要對這三個頁面單獨做一個head，更加方便于SEO優(yōu)化，搜索引擎的爬?。?/p>
好，我們打開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'
}]
}
},
我們再次打開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)前頁面的源代碼查看一下，服務(wù)端渲染新head標(biāo)簽內(nèi)容是否生效。
補充知識：nuxt 為單獨的頁面或組件 注入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
}
]
}
},
由于地圖 只有在一個頁面使用, 沒必要全局引入,于是就在單個頁面使用
以上這篇nuxt 每個頁面head標(biāo)簽內(nèi)容設(shè)置方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 實現(xiàn)分頁與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實現(xiàn)分頁+輸入框關(guān)鍵字篩選功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
vue使用vuedraggable插件實現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了解讀vue頁面監(jiān)聽store值改變問題，具有很好的參考價值，希望對大家有所幫助。2022-10-10
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
分頁功能是常見的需求之一，本文主要介紹了Vue前端利用slice()方法實現(xiàn)分頁器，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定，如何進行綁定，如何進行數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了開啟Vue項目缺少node_models包的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue axios請求成功卻進入catch的原因分析，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文給大家介紹Vue3中setup()函數(shù)中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開發(fā)方式,感興趣的朋友跟隨小編一起看看吧2023-11-11