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