TDK是什么

TDK就是網(wǎng)站的標(biāo)題（title）、描述（description）和關(guān)鍵詞（keyword）

TDK在哪里

上面大佬對(duì)TDK的概念解釋的很全面，但是在網(wǎng)頁中的TDK在哪里呢，作為開發(fā)人員打開F12我們就可以看到

可以看到T就是我們頁簽中的標(biāo)題，而description和keyword也是可以存在的但是并沒有給用戶直接展示的形式

設(shè)置網(wǎng)站TDK

在html中我們可以如下設(shè)置我們的網(wǎng)站TDK

設(shè)置后效果如下

Vue中動(dòng)態(tài)設(shè)置TDK

1. 修改index.html

將TDK的內(nèi)容清空，然后看到官方提到了位置的問題，meta標(biāo)簽必須寫在頭部head標(biāo)簽之內(nèi)，而keywords的meta標(biāo)簽要寫在title的meta標(biāo)簽之后，但又在description的meta標(biāo)簽之前，像下面這樣的順序?qū)?#xff1a;

2. 來到路由配置中添加meta屬性

meta: {title: '首頁',content: {keywords: '關(guān)鍵字1，關(guān)鍵字2',description: '描述內(nèi)容描述內(nèi)容描述內(nèi)容描述內(nèi)容描述內(nèi)容描述內(nèi)容描述內(nèi)容'}}

3. 找到Vue項(xiàng)目中的導(dǎo)航守衛(wèi)

根據(jù)自己項(xiàng)目中導(dǎo)航守衛(wèi)設(shè)置的位置，此處為了方便我就直接設(shè)置在了route.js中了

router.beforeEach((to, from, next) => { // 路由發(fā)生變化改變description和keywordif (to.meta.content) {const head = document.getElementsByTagName('head')const 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.contenthead[0].appendChild(meta)}// 路由發(fā)生變化修改頁面titleif (to.meta.title) {document.title = to.meta.title}next() })

4. 重啟項(xiàng)目即可

npm run dev

總結(jié)

以上是生活随笔為你收集整理的Vue项目中如何设置动态的TDK的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。