vue seo管理 vue-meta-info
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的更多相关文章
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
- vue状态管理器(用户登录简单应用)
技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一 vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...
- vuex(vue状态管理)
vuex(vue状态管理) 1.先安装vuex npm install vuex --save 2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...
- 基于Vue SEO的四种方案
基于Vue SEO的四种方案 https://segmentfault.com/a/1190000019623624?utm_source=tag-newest
- 83.基于Vue SEO的四种方案(小结)
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染:2.静态化:3.预渲染 ...
- VueX(vue状态管理)简单小实例
VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...
- Vue路由管理之Vue-router
一.Vue Router介绍 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的. ...
- Vue学习日记(四)——Vue状态管理vuex
前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
随机推荐
- [原]NYOJ-数的位数-69
大学生程序代写 /* NYOJ69 阶乘数位长度 http://acm.nyist.net/JudgeOnline/problem.php?pid=69 数的长度 时间限制:3000 ms | ...
- 使用WindowsAPI获取录音音频的方法
这篇文章主要介绍了使用WindowsAPI获取录音音频的方法,非常实用的功能,需要的朋友可以参考下 本文实例介绍了使用winmm.h进行音频流的获取的方法,具体步骤如下: 一.首先需要包含以下引用对象 ...
- ORACLE 强制索引
在一些场景下,可能ORACLE不会自动走索引,这时候,如果对业务清晰,可以尝试使用强制索引. 使用强制索引,在SELECT 后面加上/*.......*/ 中间加上索引的属性,代码如下: SELECT ...
- 服务注册选型比较:Consul vs Zookeeper vs Etcd vs Eureka
zookeeper基于paxos的化简版zab,etcd基于raft算法.consul也是基于raft算法.etcd和consul作为后起之秀,并没有因为已经有了zookeeper而放弃自己,而是采用 ...
- 恢复到特定点(时间点、scn、日志序列号),rman不完全恢复
将数据库.表空间.数据文件等恢复至恢复备份集保存时间中的任何一个时间点/SCN/日志序列(一般是日志挖掘找到误操作点),但须谨慎,操作前一定需要做好备份,具备条件的情况下最好先恢复到异机,避免业务停机 ...
- UILabel UiButton 文字下面加下划线
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"直接进入" ...
- dubbo、dubbox、motan、thrift、grpc等RPC框架比较及选型
概述 前段时间项目要做服务化,所以我比较了现在流行的几大RPC框架的优缺点以及使用场景,最终结合本身项目的实际情况选择了使用dubbox作为rpc基础服务框架.下面就简单介绍一下RPC框架技术选型的过 ...
- MongoDB分析工具之一:explain()语句分析工具
explain(),语句分析工具 MongoDB 3.0之后,explain的返回与使用方法与之前版本有了很大的变化,介于3.0之后的优秀特色和我们目前所使用给的是3.0.7版本,本文仅针对Mongo ...
- UML核心元素--用例
定义:用例定义了一组用例实例,其中每个实例都是系统所执行的一些列操作,这些操作生成特定主角可以观测的值.一个完整的用例定义由参与者.前置条件.场景.后置条件构成. 1.理解用例:用例就是参与者希望通过 ...
- TS学习之基础类型
1.布尔值 let isDone:boolean = false 2.数字(支持二,八,十,十六进制) let width:number = 20 3.字符串 let name:string = &q ...