vue利用vue meta info设置每个页面的title与meta信息
title: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 #文章页面上的显示名称，一般是中文
date: 2019-11-20 16:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: vue #分类
tags: [vue] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息
如需使用 vue-meta-info 配置title和meta按照以下步骤：
1.安装
npm install vue-meta-info --save
2.在main.js引入
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
3.在vue页面配置
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [ // set meta
{
name: 'keyWords',
content: 'My Example App'
},
{
name: 'description',
content: '这是一段网页的描述'
}
]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
如果你的title或者meta是异步加载的，那么你可能需要这样使用
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>
如果您使用了Vue SSR 来渲染页面，那么您需要注意的是：
由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。 此外还需要注意的是，你应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码，例如在其中使用 setInterval 设置 timer。在纯客户端(client-side only)的代码中，我们可以设置一个 timer，然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。但是，由于在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了避免这种情况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。
基于以上约束，我们目前可以使用静态的数据来渲染我们的metaInfo，下面给出一个使用示例：
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{ // set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
此时vueMetaInfo会帮我们在ssr的context中挂载出一个title变量和一个render对象。类似于这样：
context = {
...
title: 'My Example App',
render: {
meta: function () { ... },
link: function () { ... }
}
}
至此，我们可以改造我们的模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
{{{render.meta && render.meta()}}}
{{{render.link && render.link()}}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
这样便可以渲染出需要的数据。值得注意的是：虽然我们可以使用
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>
注意：
这种形式来定义数据，但是最终渲染出来的title 依然是 loading，因为服务端渲染除了created和 beforeCreate并没有mounted钩子。
总结
到此这篇关于vue利用vue meta info设置每个页面的title与meta信息的文章就介绍到这了,更多相关vue设置页面title与meta信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结2022-12-12
这篇文章主要介绍了Vue-cli 如何将px转化为rem适配移动端,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
关于角色与权限控制,通常是分为两大类,一种是菜单权限,一种是操作权限,本文将深入探讨如何通过 Vue 实现角色权限控制,特别是基于按钮级别的权限控制,需要的可以了解下2025-02-02
vue打包静态资源后显示空白及static文件路径报错的解决
这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了如何用vue设计一个数据采集器，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章，我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。对Vue.js中的computed工作原理感兴趣的朋友跟随脚本之家小编一起学习吧2018-03-03
这篇文章主要介绍了vue中使用自定义指令实现按钮权限展示功能，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-04-04
在实际的Vue开发中,我们经常需要在多个组件之间共享一些工具函数或类,比如格式化日期、处理字符串、操作数组等,本文将详细介绍如何在Vue实例上挂载自己定义的工具类,并在项目中高效使用这些工具,需要的朋友可以参考下2024-09-09
这篇文章主要为大家介绍了vue多页面项目实现版本快照功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度。本文使用的是sessionStorage解决vuex在页面刷新后数据被清除的问题,需要的朋友可以参考下2018-04-04
最新评论