首页 > 其他 > 详细

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

时间:2021-07-14 18:09:52      阅读:31      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/rouyhx/p/15010943.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!