vue 动态修改页面的meta

这里提供两种方式,推荐使用第二种

方式1

routes: [
    {
        name:'home',
          path: '/home/:openname',
          component: Home,
          meta: {
            title: '首页'
        }
    }
  ]

方式2

  • 安装
npm install vue-meta --save
  • 在main.js中导入
import Meta from 'vue-meta'
Vue.use(Meta)
  • 使用
//静态使用
  export default {
    metaInfo: {
      title: 'This is the test',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width' }
      ]
    }
   
}
//动态使用
 metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    },

你可能感兴趣的:(vue)