nuxt 服務(wù)器渲染動態(tài)設(shè)置 title和seo關(guān)鍵字的操作
使用如下鉤子即可,但是前提條件是 沒有默認(rèn)配置head的title
asyncData ({ app }, callback) {
app.head.title = ‘new title'
callback(null, {})
},
補(bǔ)充知識:vue 每個(gè)頁面動態(tài)切換title keywords description (seo的設(shè)置)
最近接觸到需要使用到Seo,要求每個(gè)頁面擁有不同的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: '首頁title內(nèi)容',
content:{
keywords:'這里是第一個(gè)keywords',
description:'這里是第一個(gè)description',
},
}
},
{
path: '/trueBag',
name: 'trueBag',
component: trueBag,
meta: {
title: 'trueBag頁面的title內(nèi)容',
content:{
keywords:'這里是第二個(gè)keywords',
description:'這里是第二個(gè)description',
},
}
},
]
第二步 在main.js里面設(shè)置,路由發(fā)生變化修改頁面meta
前提是已經(jīng)導(dǎo)入了router
// 現(xiàn)在可以直接復(fù)制,不需要改什么東西
// 當(dāng)然如果你想添加的meta,不僅僅只有keywords 和 description的時(shí)候,
// 自己可以舉一反三 :
// setAttribute 后面就是設(shè)置它的值前提是要和router里面的content是相對應(yīng)的
//要不然是獲取不到的
//document.querySelector(‘meta[name=“description”]').setAttribute(‘content', to.meta.content.description)
router.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁面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ā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});

具體是否成功可以f12查看,如果沒有出來,一步一步打印一下,看自己是哪里出錯。
以上這篇nuxt 服務(wù)器渲染動態(tài)設(shè)置 title和seo關(guān)鍵字的操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vite多頁面配置項(xiàng)目實(shí)戰(zhàn)
vite官方文檔中有關(guān)于多頁面應(yīng)用模式如果配置的說明,下面這篇文章主要給大家介紹了關(guān)于vite多頁面配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
在Vue3中使用vue3-print-nb實(shí)現(xiàn)前端打印功能
在前端開發(fā)中,經(jīng)常需要打印頁面的特定部分,比如客戶列表或商品詳情頁,要快速實(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對應(yīng)組件具體工作細(xì)節(jié),本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章,后續(xù)空閑了會不斷更新并仿寫其他組件2023-07-07
vscode 使用Prettier插件格式化配置使用代碼詳解
這篇文章主要介紹了vscode 使用Prettier插件格式化配置使用,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
vue element upload組件 file-list的動態(tài)綁定實(shí)現(xiàn)
這篇文章主要介紹了vue element upload組件 file-list的動態(tài)綁定實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
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à)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01

