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,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
随机推荐
- bzoj 3307: 雨天的尾巴 线段树合并
题目大意: N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.问完成所有发放后,每个点存放最多的是哪种物品. 题解: 首先我们为每一个节 ...
- 高级Java工程师必备 ----- 深入分析 Java IO (二)NIO
接着上一篇文章 高级Java工程师必备 ----- 深入分析 Java IO (一)BIO,我们来讲讲NIO 多路复用IO模型 场景描述 一个餐厅同时有100位客人到店,当然到店后第一件要做的事情就是 ...
- Windows 任务管理器中的几个内存概念
我们使用的大部分 PC 是基于 Intel 微处理器的 x86 和 x64 架构计算机. 因此, 我们面对的 windows 避免不了和 Intel 架构有些设计上的契合. 比如接下来要说到的内存管理 ...
- VisualGDB系列2:VisualGDB对Linux平台的支持特性
根据VisualGDB官网(https://visualgdb.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指正. 1 复杂问题的直观解决方案 只需要轻点几 ...
- C#动态给EXCEL列添加下拉选项
Microsoft.Office.Interop.Excel.Application excel=new Microsoft.Office.Interop.Excel.Application(); M ...
- 新版 Spring下载方法
1.百度 Spring 打开官方网站 http://spring.io/ 2.======================================= 3.================= ...
- [解决问题]ubuntu无法virtualenv创建python虚拟环境的解决
刚有人问我Ubuntu python虚拟环境无法创建问题,报错same file error,防止今后遇到忘记,记录下可能的问题. 1.先在windows上试了下: pip install virtu ...
- Dialog 自定义使用2(进度条)
1: 自定义的Dialog 代码: public class IphoneProgersssDialog extends Dialog { private Context context; priv ...
- 09_android项目的目录结构
R.java是由IDE自动生成的,不允许修改. Android Dependences 安卓的支持库 项目创建之后一般都会把安卓支持库的V4包导入进来. 项目打包的时候assets的内容并不会被编译 ...
- shell script-条件语句、循环语句
条件语句 #!/bin/bash read -p "input your name:" name #第一种判断 if [ "$name" == "Mi ...