接上篇配置VueRouter
服务端和客户端渲染都是用同一个页面模板，页面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
网友评论