這期內容當中小編將會給大家帶來有關在nuxt中如何設置頁面的head標簽，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
打開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"
}]
}
},每次設置修改之后，我們都需要打開當前頁面的源代碼查看一下，服務端渲染新head標簽內容是否生效。
補充知識：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標簽了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
