TDK是什么

TDK就是網站的標題（title）、描述（description）和關鍵詞（keyword）

TDK在哪里

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

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

設置網站TDK

在html中我們可以如下設置我們的網站TDK

設置后效果如下

Vue中動態設置TDK

1. 修改index.html

將TDK的內容清空，然后看到官方提到了位置的問題，meta標簽必須寫在頭部head標簽之內，而keywords的meta標簽要寫在title的meta標簽之后，但又在description的meta標簽之前，像下面這樣的順序寫：

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

 meta: {title: '首頁',content: {keywords: '關鍵字1，關鍵字2',description: '描述內容描述內容描述內容描述內容描述內容描述內容描述內容'}}

3. 找到Vue項目中的導航守衛

根據自己項目中導航守衛設置的位置，此處為了方便我就直接設置在了route.js中了

router.beforeEach((to, from, next) => {
//    路由發生變化改變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)}// 路由發生變化修改頁面titleif (to.meta.title) {document.title = to.meta.title}next()
})

4. 重啟項目即可

npm run dev