vue插件MetaInfo的使用
vue-meta-info 是一个基于vue 2.0的插件,更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。使用步骤:1安装 vue-meta-infonpm i vue-meta-info --savecnpm i vue-meta-info --save2.在main.js中引入vue-meta-infoimport Vu
·
vue-meta-info 是一个基于vue 2.0的插件,更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。
使用步骤:
1安装 vue-meta-info
npm i vue-meta-info --save
cnpm i vue-meta-info --save
2.在main.js中引入vue-meta-info
import Vue from 'vue'
import MetaInfo from 'vue-meta-info';
Vue.use(MetaInfo)
3.在vue文件中配置tdk
- 动态使用metaInfo
<template>
<div id="app">
<!--<router-view v-if="!$route.meta.keepAlive"></router-view>-->
</div>
</template>
<script>
export default {
name: 'App',
components: {},
metaInfo () {
return {
title:this.title,
meta:[{
charset: "utf-8"
},
{
name: "viewport",
content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
}]
}
}
},
data() {
return {
title:'xxx系统',
}
},
mounted() {
setTimeout(() => {
this.title = 'xxx项目',
}, 2000)
},
methods: {
}
</script>
- 静态配置metaInfo
<template>
<div id="app">
<!--<router-view v-if="!$route.meta.keepAlive"></router-view>-->
</div>
</template>
<script>
export default {
name: 'App',
components: {},
metaInfo () {
title:'xxx系统',
meta:[{
charset: "utf-8"
},
{
name: "viewport",
content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
}
]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
},
data() {
return {
title:'xxx系统',
}
},
mounted() {},
methods: {
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)