nuxt 服務(wù)器渲染動(dòng)態(tài)設(shè)置 title和seo關(guān)鍵字的操作
使用如下鉤子即可，但是前提條件是 沒(méi)有默認(rèn)配置head的title
asyncData ({ app }, callback) {
app.head.title = ‘new title'
callback(null, {})
},
補(bǔ)充知識(shí)：vue 每個(gè)頁(yè)面動(dòng)態(tài)切換title keywords description （seo的設(shè)置）
最近接觸到需要使用到Seo,要求每個(gè)頁(yè)面擁有不同的title,keywords,description
！?。≡谶@里先添加一步：
html文件添加
<meta data-n-head="1" data-hid="description" name="description" content="">
<meta data-n-head="1" data-hid="keywords" name="keywords" content="">
第一步 在router里面index.js文件夾中
routes: [
{
path: '/',
name: 'main',
component: Main,
meta: {
title: '首頁(yè)title內(nèi)容',
content:{
keywords:'這里是第一個(gè)keywords',
description:'這里是第一個(gè)description',
},
}
},
{
path: '/trueBag',
name: 'trueBag',
component: trueBag,
meta: {
title: 'trueBag頁(yè)面的title內(nèi)容',
content:{
keywords:'這里是第二個(gè)keywords',
description:'這里是第二個(gè)description',
},
}
},
]
第二步 在main.js里面設(shè)置，路由發(fā)生變化修改頁(yè)面meta
前提是已經(jīng)導(dǎo)入了router
// 現(xiàn)在可以直接復(fù)制，不需要改什么東西
// 當(dāng)然如果你想添加的meta,不僅僅只有keywords 和 description的時(shí)候，
// 自己可以舉一反三 :
// setAttribute 后面就是設(shè)置它的值前提是要和router里面的content是相對(duì)應(yīng)的
//要不然是獲取不到的
//document.querySelector(‘meta[name=“description”]').setAttribute(‘content', to.meta.content.description)
router.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁(yè)面meta */
console.log(to.meta.content)
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
meta.content = to.meta.content;
head[0].appendChild(meta)
}
// /* 路由發(fā)生變化修改頁(yè)面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});
具體是否成功可以f12查看，如果沒(méi)有出來(lái)，一步一步打印一下，看自己是哪里出錯(cuò)。
以上這篇nuxt 服務(wù)器渲染動(dòng)態(tài)設(shè)置 title和seo關(guān)鍵字的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vite多頁(yè)面配置項(xiàng)目實(shí)戰(zhàn)
vite官方文檔中有關(guān)于多頁(yè)面應(yīng)用模式如果配置的說(shuō)明,下面這篇文章主要給大家介紹了關(guān)于vite多頁(yè)面配置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
在Vue3中使用vue3-print-nb實(shí)現(xiàn)前端打印功能
在前端開發(fā)中,經(jīng)常需要打印頁(yè)面的特定部分,比如客戶列表或商品詳情頁(yè),要快速實(shí)現(xiàn)這些功能,可以使用 vue3-print-nb 插件,本文就給大家介紹了如何在 Vue 3 中使用 vue3-print-nb 實(shí)現(xiàn)靈活的前端打印,需要的朋友可以參考下2024-06-06
elementui源碼學(xué)習(xí)仿寫一個(gè)el-tooltip示例
本篇文章記錄仿寫一個(gè)el-tooltip組件細(xì)節(jié)，從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié)，本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章，后續(xù)空閑了會(huì)不斷更新并仿寫其他組件2023-07-07
跨域指瀏覽器不允許當(dāng)前頁(yè)面的所在的源去請(qǐng)求另一個(gè)源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vscode 使用Prettier插件格式化配置使用代碼詳解
這篇文章主要介紹了vscode 使用Prettier插件格式化配置使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
vue element upload組件 file-list的動(dòng)態(tài)綁定實(shí)現(xiàn)
這篇文章主要介紹了vue element upload組件 file-list的動(dòng)態(tài)綁定實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue前端導(dǎo)出多級(jí)表頭的excel表的示例代碼
本文主要介紹了vue前端導(dǎo)出多級(jí)表頭的excel表的示例代碼,可以使用xlsx庫(kù)來(lái)創(chuàng)建Excel文件,下面就來(lái)具體介紹一下,感興趣的可以了解一下2024-06-06
Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例
這篇文章主要介紹了Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例，幫助大家實(shí)現(xiàn)條碼解析，感興趣的朋友可以了解下2020-09-09
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01