vue+vue-meta-info動態(tài)設置meta標簽教程
在寫移動端項目的時候，通常都會設置meta禁止用戶縮放。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
最近的需求中，個別頁面允許用戶縮放，就需要給不同的頁面設置不同的meta了。
但是vue是單頁面應用，沒辦法向原生一樣給每個頁面設置不同的頭信息。所以就需要借助到vue-meta-info了。
vue-meta-info官方介紹
vue-meta-info 是一個基于vue 2.0的插件，它會讓你更好的管理你的 app 里面的 meta 信息。
你可以直接 在組件內(nèi)設置 metaInfo 便可以自動掛載到你的頁面中。
如果你需要隨著數(shù)據(jù)的變化，自動更新你的title、meta等信息，那么用此 插件也是再合適不過了。
當然，有時候我們也可能會遇到讓人頭疼的SEO問題，那么使用此插件配合 prerender-spa-plugin 也是再合適不過了
vue-meta-info使用
npm install vue-meta-info --save
在main.js中全局引入
import MetaInfo from 'vue-meta-info'; Vue.use(MetaInfo);
在組件內(nèi)靜態(tài)使用
<template>
? ...
</template>
?
<script>
? export default {
? ? ?metaInfo: {
? ? ? title: '操作手冊',
? ? ? ?meta: [
? ? ? { name:'viewport', content:
? ? ? 'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'}
? ? ]
? ? },
? }
</script>?需要注意的是：vue-meta-info并不是直接改變頁面的meta信息，而是在下面追加一條覆蓋上面的，如下圖：
所以只為某一個頁面設置了，會影響別的頁面的。就需要根據(jù)路由切換來動態(tài)設置了。在App.vue中監(jiān)聽路由變化
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template><script>
export default {
name: "App",
metaInfo() {
return {
meta: this.metaData
}
},
data() {
return {
metaData: [{
name: 'viewport',
content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
}]
}
},
watch: {
$route(to, from) {
if (to.name == 'pdf') {
this.metaData = [{
name: 'viewport',
content: 'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'
}]
} else {
this.metaData = [{
name: 'viewport',
content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
}]
}
},
},
};
</script><style lang='less'>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>
如果需要改動的頁面太多，比如要做seo,給頁面設置keywords和description的。也可以在router中配置，結合vuex去設置更加優(yōu)雅一點把。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue如何在頁面刷新時進行重定向,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-01-01
本文通過實例代碼給大家介紹了Vue隱藏顯示、只讀功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
vue中使用el-table組件checkbox進行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(示例代碼)
這篇文章主要介紹了vue中使用el-table組件checkbox進行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-12-12
監(jiān)聽器是Vue3中非常好用的一個特性,用于監(jiān)聽某個響應式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實踐,具有一定的參考價值,感興趣的可以了解一下2023-12-12
vue基于element-ui的三級CheckBox復選框功能的實現(xiàn)代碼
最近vue項目需要用到三級CheckBox復選框，需要實現(xiàn)全選反選不確定三種狀態(tài)。這篇文章主要介紹了vue基于element-ui的三級CheckBox復選框功能的實現(xiàn)方法,需要的朋友可以參考下2018-10-10
在現(xiàn)代 Web 開發(fā)中,前端路由管理是構建單頁面應用（SPA）的關鍵組成部分,隨著 Vue3 的發(fā)布,Vue Router 也得到了相應的更新,在這篇博文中,我們將詳細探討 Vue3 中的路由管理,需要的朋友可以參考下2025-01-01
vue3中emit('update:modelValue')使用簡單示例
這篇文章主要給大家介紹了關于vue3中emit('update:modelValue')使用的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
本篇文章主要介紹了詳解vue父子模版嵌套案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細介紹了Vue中使用js制作進度條式數(shù)據(jù)對比動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02