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)化，搜索引擎的爬取；
好，我們打開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)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了Vue 封裝防刷新考試倒計時組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了VUE搭建手機(jī)商城心得和遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue自定義數(shù)字輸入框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
vue flex 布局實現(xiàn)div均分自動換行的示例代碼
這篇文章主要介紹了vue flex 布局實現(xiàn)div均分自動換行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue 移動端適配方案詳解，詳細(xì)的介紹2種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue3.0引入百度地圖并標(biāo)記點的實現(xiàn)代碼
這篇文章主要介紹了vue3.0引入百度地圖并標(biāo)記點,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue+antv實現(xiàn)雷達(dá)圖，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題
這篇文章主要介紹了Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03