一文看懂动态设置meta和title标签

一、meta标签是什么二、静态设置meta标签属性①、首先下载相关包②、在main.js中全局使用③、给每个route赋一个静态属性对象④、在vuex中存储一个空的属性对象和定义方法⑤、最后在main.js中使用路由拦截守卫 三、动态设置meta标签属性①、修改单个路由②、动态赋值

一、meta标签是什么

在w3cschool中的定义如下所示

元数据（metadata）是关于数据的信息。

标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta标签可以用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

在seo优化中，合理利用 Meta 标签的Description 和 Keywords属性，加入网站的描述或者网页的关键字，可使网站更加贴近用户体验。

今天我们就要使用的就是关于Meta 标签的 Description 和 Keywords属性

二、静态设置meta标签属性

①、首先下载相关包

npm install vue-meta --save 或 yarn add vue-meta

②、在main.js中全局使用

import Meta from 'vue-meta';// 使用vue-metaVue.use(Meta);

③、给每个route赋一个静态属性对象

const routes = [{path: '/',name: 'website_index',component: website_index,children: [// 官网首页{path: '/', name: '/',component: home_main,meta: {metaInfo: {title: "首页",keywords: "资讯,新闻,财经,房产,视频,NBA,科技",description: "我司从创立至今，已经成为集新闻信息……"}}}, // 解决方案详细信息{path: 'solutions_detail', name: 'solutions_detail',component: solutions_detail,meta: {metaInfo: {title: "解决方案",keywords: "资讯,新闻,财经,房产,视频,NBA,科技",description: "我司从创立至今，已经成为集新闻信息……"}}},// 关于我们{path: 'about_hc', name: 'about_hc',component: about_hc,meta: {metaInfo: {title: "关于我们",keywords: "资讯,新闻,财经,房产,视频,NBA,科技",description: "我司从创立至今，已经成为集新闻信息……"}}}]},]

④、在vuex中存储一个空的属性对象和定义方法

export default new Vuex.Store({state: {baseUrl:'http://192.168.31.39:8060/',// 默认网站关键词metaInfo: {}},mutations: {CAHNGE_META_INFO(state, metaInfo) {console.log(metaInfo,"metaInfo")state.metaInfo = metaInfo;}},actions: {},modules: {}})

⑤、最后在main.js中使用路由拦截守卫

router.beforeEach((to, from, next) => {if (to.meta.metaInfo){mit("CAHNGE_META_INFO", to.meta.metaInfo)}next()});new Vue({router,store, metaInfo(){return {title: this.$store.state.metaInfo.title,meta: [{name: "keywords",content: this.$store.state.metaInfo.keywords}, {name: "description",content: this.$store.state.metaInfo.description}]}},render: h => h(App)}).$mount('#app')

这样一个静态的meta标签属性就设置好了

三、动态设置meta标签属性

设置动态的meta标签属性的话，我们可以在静态设置的基础上修改。比如修改某个路由的动态meta标签属性

①、修改单个路由

const routes = [{path: '/',name: 'website_index',component: website_index,children: [// 官网首页{path: '/', name: '/',component: home_main,meta: {metaInfo: {title: "首页",keywords: "资讯,新闻,财经,房产,视频,NBA,科技",description: "我司从创立至今，已经成为集新闻信息……"}}},// 解决方案详细信息{path: 'solutions_detail', name: 'solutions_detail',component: solutions_detail,meta: {metaInfo: {title: "解决方案",keywords: "资讯,新闻,财经,房产,视频,NBA,科技",description: "我司从创立至今，已经成为集新闻信息……"}}},// 关于我们{path: 'about_hc', name: 'about_hc',component: about_hc}]},]

删除关于我们的路由静态的meta属性

②、动态赋值

用在该路由页面加载时获取到的动态属性赋值给vuex中的对象属性

mounted () {// 假设这是我们获取到的动态数据let metaInfo = {title: "张先生",keywords: "玉树临风,风流倜傥",description: "前方路过村庄，记得带一箱土鸡蛋回去~"}this.$mit("CAHNGE_META_INFO", metaInfo)}

这样就实现了动态设置meta标签属性~~

有想法的小伙伴下方评论区多多交流噢~~