vue利用vue meta info設(shè)置每個頁面的title與meta信息
title: vue 使用 vue-meta-info 設(shè)置每個頁面的 title 和 meta 信息 #文章頁面上的顯示名稱,一般是中文
date: 2019-11-20 16:30:16 #文章生成時間,一般不改,當(dāng)然也可以任意修改
categories: vue #分類
tags: [vue] #文章標(biāo)簽,可空,多標(biāo)簽請用格式,注意:后面有個空格
description: vue 使用 vue-meta-info 設(shè)置每個頁面的 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: '這是一段網(wǎng)頁的描述' } ] 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 來渲染頁面,那么您需要注意的是:
由于沒有動態(tài)更新,所有的生命周期鉤子函數(shù)中,只有 beforeCreate 和 created 會在服務(wù)器端渲染(SSR)過程中被調(diào)用。這就是說任何其他生命周期鉤子函數(shù)中的代碼(例如 beforeMount 或 mounted),只會在客戶端執(zhí)行。 此外還需要注意的是,你應(yīng)該避免在 beforeCreate 和 created 生命周期時產(chǎn)生全局副作用的代碼,例如在其中使用 setInterval 設(shè)置 timer。在純客戶端(client-side only)的代碼中,我們可以設(shè)置一個 timer,然后在 beforeDestroy 或 destroyed 生命周期時將其銷毀。但是,由于在 SSR 期間并不會調(diào)用銷毀鉤子函數(shù),所以 timer 將永遠(yuǎn)保留下來。為了避免這種情況,請將副作用代碼移動到 beforeMount 或 mounted 生命周期中。
基于以上約束,我們目前可以使用靜態(tài)的數(shù)據(jù)來渲染我們的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>
這樣便可以渲染出需要的數(shù)據(jù)。值得注意的是:雖然我們可以使用
<template> ... </template> <script> export default { name: 'async', metaInfo () { return { title: this.pageName } }, data () { return { pageName: 'loading' } }, mounted () { setTimeout(() => { this.pageName = 'async' }, 2000) } } </script>
注意:
這種形式來定義數(shù)據(jù),但是最終渲染出來的title 依然是 loading,因為服務(wù)端渲染除了created和 beforeCreate并沒有mounted鉤子。
總結(jié)
到此這篇關(guān)于vue利用vue meta info設(shè)置每個頁面的title與meta信息的文章就介紹到這了,更多相關(guān)vue設(shè)置頁面title與meta信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0實現(xiàn)倒計時的插件(時間戳 刷新 跳轉(zhuǎn) 都不影響)
我發(fā)現(xiàn)好多倒計時的插件,刷新都會變成從頭再來,于是自己用vue2.0寫了一個,感覺還不錯,特此分享到腳本之家平臺供大家參考下2017-03-03element-ui復(fù)雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序詳解
這篇文章主要給大家介紹了關(guān)于element-ui復(fù)雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08vue的axios使用post時必須使用qs.stringify而get不用問題
這篇文章主要介紹了vue的axios使用post時必須使用qs.stringify而get不用問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue中el-form-item展開項居中的實現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開項居中的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例
今天小編就為大家分享一篇vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09