vue归纳笔记：vuex结合vue-meta实现router动态设置meta标签

网站的访问流量中，有相当一部分都是来自于搜索引擎，而来自于搜索引擎的流量又全部是免费的，所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接且最有效的手段。而SEO往往又都是从优化meta标签开始的！

一、meta标签介绍

meta标签提供关于HTML文档的元数据(元数据指用于描述数据的数据)。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

二、meta标签的特点

1、meta 标签只能位于 head 元素内部。

2、在HTML中，meta 标签没有结束标签。在 XHTML 中，meta 标签必须被正确地关闭。

3、meta标签共有两个属性，分别是http-equiv属性和name属性。

三、SEO 优化部分

关于meta标签的用法实现太多了，在此就不在一一赘述了。现将SEO优化部分列举下：

四、Vue SPA 应用中设置title与meta

在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在代码里，直接这么做:

但是这样的代码，是不是感觉怪怪的！怎么看也不够优雅！没关系，咱们继续往下看！

五、优雅设置title与meta

可以通过引入vue-meta模块，实现以优雅的方式设置title与meta。

1、安装

npminstall vue-meta -S

2、在main.js中引入

importMetafrom'vue-meta';Vue.use(Meta);

3、使用

六、vue路由中动态设置title与meta

1、在router.js中创建路由：

2、在store.js中创建状态：

3、main.js如下：

自此功能已完美完成，希望能够对小伙伴们有所帮助。