vue设置页面title与meta信息 vue利用vue meta info设置每个页面的title与meta信息
_Battle 人气:4title: 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钩子。
总结
加载全部内容