Vue中动态修改head标签的title及mate

1、安装

npm install vue-meta --save

2、引用  main.js

import Meta from ‘vue-meta‘
Vue.use(Meta)

3、动态修改   APP.vue

import {indexData} from ‘./api/index‘

data () {
    return {
      extension:‘‘,
    }
  },

metaInfo(){//nuxt.js中metaInfo==head
   return {
    title: this.extension.f_extension_title,
    meta: [
     {
       hid: "keywords",
       name: ‘keywords‘,
       content: this.extension.f_extension_keywords
     },
     {
       hid: "description",
       name: ‘description‘,
       content: this.extension.f_extension_description,
     }
   ]
},
  methods: {   
    getAllData(){
      this.$axios.get(indexData,{
          params:{
          p:‘pc‘
          }
      }).then((res)=>{
          if(parseInt(res.data.errCode)>=0){
              if(res.data.data){
                 this.extension=res.data.data.extension       
              }
          }
          else{
          
          }
      }).catch((err)=>{
          console.log(err )
      })
    }, 
  },

  mounted(){
   this.getAllData()
 }


 

Vue中动态修改head标签的title及mate

上一篇:3-4 redis的安装与配置


下一篇:xhtml