vue-meta-info:
         安装:

npm install vue-meta-info --save
         全局引入vue-meta-info,在main.js
                import Vue from 'vue'
                import MetaInfo from 'vue-meta-info'
                Vue.use(metaInfo)
         组件内静态使用metaInfo
               <script>
                    export default {
                             metaInfo: {
                                  title: '新闻页面',
                                  meta: [{
                                       name: 'keyWords',
                                       content: '新闻'
                                   }]
                                }
                              }
                 </script>
如果你的title或者meta不是静态的,是需要异步加载的::用metaInfo() 方法
    <script>
       export default {
              name: 'async',
                     metaInfo() {
                            return {
                                title: this.pageName
                             }
                      },
            data() {
                 return {
                      pageName: 'loading'
                  }
             },
            mounted (){
                   setTimeout(() => {
                       this.pageName = 'async'
                   },2000)
             }
        }
</script>

vue seo管理 vue-meta-info的更多相关文章

  1. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  2. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  3. vue状态管理器(用户登录简单应用)

    技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一  vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...

  4. vuex(vue状态管理)

    vuex(vue状态管理) 1.先安装vuex npm install vuex --save   2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...

  5. 基于Vue SEO的四种方案

    基于Vue SEO的四种方案 https://segmentfault.com/a/1190000019623624?utm_source=tag-newest

  6. 83.基于Vue SEO的四种方案(小结)

    前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染:2.静态化:3.预渲染 ...

  7. VueX(vue状态管理)简单小实例

    VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...

  8. Vue路由管理之Vue-router

    一.Vue Router介绍 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的. ...

  9. Vue学习日记(四)——Vue状态管理vuex

    前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...

随机推荐

  1. 关于python包,模块,.pyc文件和文件导入理解

    参考文献 一.包 包是一个文件夹,用来存放模块和子包. 包里一般会有一个__init__.py的文件(也可以没有). 包里会有一个__pycache__文件夹,存放.py文件经解释器解释后的中间字节码 ...

  2. web网页打印的方法(浏览器通用)

    Web打印组件jatoolsPrinter 应用web化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于 web的应用,客户端的规则很简单,容易学习,容易维护,容易发布.但对程序员来说 ...

  3. linux命令学习笔记(57):ss命令

    ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat 类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的 ...

  4. log4net调试

    public delegate void LogReceivedEventHandler(object source, LogReceivedEventArgs e); public sealed c ...

  5. 1143. Lowest Common Ancestor (30)

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  6. 一个内存增长问题的分析和处理(二)——valgrind工具的用法

    valgrind是linux下对C++和C程序进行内存泄露检测的工具,除了内存检测,valgrind还提供了很多其他的功能,这里主要介绍下valgrind的内存检测的功能. 首先是文件的下载,valg ...

  7. 洛谷 P4547 & bzoj 5006 随机二分图 —— 状压DP+期望

    题目:https://www.luogu.org/problemnew/show/P4547 https://www.lydsy.com/JudgeOnline/problem.php?id=5006 ...

  8. TextBlock截断字符显示为....

    添加: TextTrimming="CharacterEllipsis" 到TextBlock中, 即可让TextBlock 支持截断字符显示为...

  9. 【转】 Pro Android学习笔记(三九):Fragment(4):基础小例子-续

    目录(?)[-] Step 3实现简介显示类DetailFragment 创建实例 编写所需的生命周期代码 Step 4实现showDetailint index如何管理fragment fragme ...

  10. CodeForces 1107F. Vasya and Endless Credits

    题目简述:给定 $n \leq 500$ 个贷款方式,其中第$i$个贷款额为$a_i$元,需要$k_i$个月偿还,每月还贷$b_i$元.在每个月月初可申请其中一个贷款,而在每个月月底时需要还贷.求:( ...