管理头部Head内容

2021-03-29 本文已影响0人翔子丶

服务端和客户端渲染都是用同一个页面模板，页面body部分是动态渲染，但是title和meta都是写死的，所以下面来演示如何为不同页面定制不同的head头部内容。

Vue Meta 是一个支持 SSR 的第三方 Vue.js 插件，可轻松实现不同页面的 head 内容管理。使用它的方式非常简单，而只需在页面组件中使用 metaInfo 属性配置页面的 head 内容即可。

<template>
...
</template>
<script>
    export default {
        metaInfo: {
            title: 'My Example App',
            titleTemplate: '%s - Yay!',
            htmlAttrs: {
                lang: 'en',
                amp: true
            }
        }
    }
</script>

页面渲染出来的结果

<html lang="en" amp>
    <head>
        <title>My Example App - Yay!</title>
        ...
    </head>
</html>

使用步骤如下:

安装: npm i vue-meta

在通用入口将注册vue-meta，并混入metaInfo

...
import VueMeta from 'vue-meta'

Vue.use(VueMeta)
Vue.mixin({
  metaInfo: {
    titleTemplate: '%s - 拉勾教育',
  },
})
...

在服务端渲染入口模块中适配 vue-meta

...
const { app, router } = createApp()

const meta = app.$meta()
context.meta = meta
...

最后在模板页面注入meta信息

<head>
    {{{ meta.inject().title.text() }}}
    {{{ meta.inject().meta.text() }}}
</head>

在组件中添加不同的title信息

// Home.vue
{
    metaInfo: {
        title: '首页' // 首页 - 拉勾教育
    }
}

// About.vue
{
    metaInfo: {
        title: 'About' // About - 拉勾教育
    }
}

更多属性设置请参考metaInfo properties

管理头部Head内容

猜你喜欢

热点阅读