vue ssr 没有数据
维达 (vue-meta)
Manage HTML metadata in Vue.js components with SSR support.
通过SSR支持管理Vue.js组件中HTML元数据。
<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>
介绍 (Introduction)
Vue Meta is a Vue.js plugin that allows you to manage your app's metadata. It is inspired by and works similar as react-helmet
for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo
property.
Vue Meta是一个Vue.js插件,可让您管理应用程序的元数据。 它的灵感来自于react-helmet
,其作用类似于react-helmet
。 但是,您无需将数据设置为传递给专有组件的道具,而只需使用metaInfo
属性将其作为组件数据的一部分导出metaInfo
。
These properties, when set on a deeply nested component, will cleverly overwrite their parent components' metaInfo
, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.
这些属性在深度嵌套的组件上设置时,将巧妙地覆盖其父组件的metaInfo
,从而为每个顶级视图启用自定义信息,并将元数据直接耦合到深度嵌套的子组件,以实现更可维护的代码。
文献资料 (Documentation)
Please find the documention on https://vue-meta.nuxtjs.org
请在https://vue-meta.nuxtjs.org上找到该文档
:globe_with_meridians: Please help us translate the documentation into your language, see here for more information
:globe_with_meridians:请帮助我们将文档翻译成您的语言,有关更多信息,请参见此处
例子 (Examples)
Looking for more examples what vue-meta can do for you? Have a look at the examples
寻找更多示例,vue-meta可以为您做什么? 看看例子
安装 (Installation)
纱 (Yarn)
$ yarn add vue-meta
npm (npm)
$ npm install vue-meta --save
下载/ CDN (Download / CDN)
Use the download links below - if you want a previous version, check the instructions at https://unpkg.com.
使用下面的下载链接-如果要使用以前的版本,请查看https://unpkg.com上的说明。
Latest version: https://unpkg.com/vue-meta/dist/vue-meta.min.js
最新版本: https : //unpkg.com/vue-meta/dist/vue-meta.min.js
Latest v1.x version: https://unpkg.com/[email protected]/dist/vue-meta.min.js
最新的v1.x版本: https : //unpkg.com/ [受电子邮件保护] /dist/vue-meta.min.js
Uncompressed:
未压缩:
<script src="https://unpkg.com/vue-meta/dist/vue-meta.js"></script>
Minified:
缩小:
<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>
快速使用 (Quick Usage)
See the documentation for more information
请参阅文档以获取更多信息
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
})
使用vue-meta的框架 (Frameworks using vue-meta)
If you wish to create your app even more quickly, take a look at the following frameworks which use vue-meta
如果您希望更快地创建应用,请查看以下使用vue-meta的框架
Nuxt.js - The Vue.js Progressive Framework
Nuxt.js -Vue.js渐进框架
Gridsome - The Vue.js JAMstack Framework
Gridsome -Vue.js JAMstack框架
Ream - Framework for building universal web app and static website in Vue.js
铰 -框架构建通用的Web应用程序和静态网站Vue.js
Vue-Storefront - PWA for eCommerce
Vue店面 -电子商务的PWA
Factor JS - Extension-first VueJS platform for front-end developers.
Factor JS-面向前端开发人员的扩展优先的VueJS平台。
如何翻译文件 (How to translate documentation)
Thanks for your interest in translating the documentation. As our docs are based on VuePress, we recommend to have a look at their docs about internationalization as well
感谢您对翻译文档的关注。 由于我们的文档基于VuePress,因此我们建议您也查看一下有关国际化的文档
Here are the steps you will need to take:
这是您需要采取的步骤:
Clone this repository
克隆此存储库
Create a new branch
创建一个新分支
Browse to
/docs/
浏览到
/docs/
Create a folder with the language code you will add a translation for (eg
/zh/
)使用您要添加翻译的语言代码创建一个文件夹(例如
/zh/
)Copy all
*.md
files and the foldersapi
,faq
, andguide
to that folder将所有
*.md
文件和文件夹api
,faq
和guide
复制到该文件夹Translate the copied files in your language folder
翻译您的语言文件夹中的复制文件
Edit
.vuepress/config.yml
and add a config section for your locale in bothlocales
asthemeConfig.locales
编辑
.vuepress/config.yml
并在两个locales
环境中为您的语言环境添加配置部分作为themeConfig.locales
Test your translation by running the docs dev server with
yarn docs
通过使用
yarn docs
运行docs dev服务器来测试翻译Create a pull request with your changes
使用您的更改创建请求请求
Receive eternal gratefulness from your fellow language speakers :heart:
收到来自您的母语使用者的永恒感激:心:
翻译自: https://vuejsexamples.com/manage-html-metadata-in-vue-js-components-with-ssr-support/
vue ssr 没有数据