vue利用vue meta info設定每個頁面的title與meta資訊
title: 使用 vue-meta-info 設定每個頁面的 title 和 meta 資訊 #文章頁面上的顯示名稱，一般是中文
date: 2019-11-20 16:30:16 #文章生成時間，一般不改，當然也可以任意修改
categories: vue #分類
tags: [vue] #文章標籤，可空，多標籤請用格式，注意:後面有個空格
descrhttp://www.cppcns.comiption: vue 使用 vue-meta-info 設定每個頁面的 title 和 meta 資訊
如需使用 vue-meta-info 配置title和meta按照以下步驟：
1.安裝
npm install vue-meta-info --save
2.在main.引入
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
3.在vue頁面配置
<template>
...
</template>
http://www.cppcns.com<script>
export defwww.cppcns.comault {
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..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'
www.cppcns.com }]
link: [{ // set link
www.cppcns.com 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',2000)
}
}
</script>
注意：
這種形式來定義資料，但是最終渲染出來的title 依然是 loading，因為服務端渲染除了created和 beforeCreate並沒有mounted鉤子。
總結
到此這篇關於vue利用vue meta info設定每個頁面的title與meta資訊的文章就介紹到這了,更多相關vue設定頁面title與meta資訊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！