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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐