VUE(SPA)项目中使用SEO-动态生成META标签

上文中提到过这里主要使用的是 vue-meta-info ，下面来和大家说一下它的用法

大家可以选择不同的安装方式

Yarn:

NPM:

引入方式很简单，没有什么难理解的，照做就是了

使用方式的话会分为两种(接下来会举一些官网上的例子)：

    使用时注意，meta里可以写多个map，下面这个例子中只写了keyWords

这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式：

    这些配置好了之后，就可以测试一下啦，打开调试工具，点击到Elements一栏，看下head标签下是否有你刚刚生成的meta，如果有的话，那么恭喜你，你成功的征服了它

1 按了F5不是理所当然的应该刷新页面么，即使我SPA被刷新了又怎么样呢？也没有改变任何用户习惯，用户不会觉得confused。 2 而是应该让用户慢慢培养SPA不用去按F5的习惯。 3 我感觉需要做的也就是保存个用户登录状态，这个可以存在server的session里，和传统的web应用是一样的，并没有特别之处。

一、什么是SPA（SPA 的概念）

单页 Web 应用 (single-page application 简称为 SPA)，简单理解为：仅仅在web页面初始化时加载相应的HTML、JavaScript、CSS，一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。

二、SPA的优缺点

1、优点：

（1）由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

（2）只要使用支持HTML5和CSS3的浏览器就可以执行复杂的SPA,因此，开发人员不必为了写SPA网站而特别学习另一个开发方式，而使用者也不额外安装软件，所以，让开发SPA网页程序的入门和使用门槛降低不少。

2、缺点：

以SPA方式开发的网站不容易管理也不够安全。因为没了一页一页的网页给搜索引擎的爬虫来爬，所以，在搜索引擎最佳化（SEO）的工作上，需要花费额外的功夫。因为没有换页，需要自定义状态来取代传统网页程序以网址来做判断。

---