vue cli4中定义每个页面的title以及keywords\Keywords的方法

作者：发布时间：2020-02-12 来源:佚名点击数：

先晒下版本
PS D:\vue\vueJS-001\dist> vue -V
@vue/cli 4.1.2

一个好网站，没有优秀的title以及keywords\Keyword就不行，在vue cli4中如何定义这些呢，这里分享两个方法。

方法一：使用vue-router设置每个页面的title

进入 router 文件夹底下的index.js文件

首先引入：

import Vue from 'vue'
import Router from 'vue-router'

然后在路由里面配置每个路由的地址：

  routes: [
    {          /* （首页）默认路由地址 */
      path: '/',
      name: 'Entrance',
      component: Entrance,
      meta: {
        title: '首页入口'
      }
    },
    {          /* 修改昵称 */
      path: '/modifyName/:nickName',
      name: 'modifyName',
      component: modifyName,
      meta: {
        title: '修改昵称'
      }
    },
    {          /* 商品详情 */
      path: '/goodsDetail',
      name: 'goodsDetail',
      component: goodsDetail,
      meta: {
        title: '商品详情'
      }
    },
    { /* Not Found 路由，必须是最后一个路由 */
      path: '*',
      component: NotFound,
      meta: {
        title: '找不到页面'
      }
    }
  ]

在每一个meta里面设置页面的title名字，最后在遍历

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

这样就为每一个VUE 的页面添加了title

方法二使用vue-meta进行mate动态管理HTML head信息

vue-meta的官方文档在这里 https://github.com/declandewet/vue-meta
文档中比较详细地说明了在浏览器端和服务器端如何使用 vue-meta 修改页面头部信息，这里我主要介绍下在SPA项目中管理meta info的使用方法。，

vue单页运用中，对单独页面使用meta的时候，他不是直接修改，而是插在下面覆盖上面的meta进行修改。
1、安装
npm install vue-meta --save

2、在main.js引入

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

3、为需要修改的页面单独定义metaInfo

export default {
metaInfo: {
title: 'This is the test',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
]
}
}

4、异步请求数据可以使用

如果component中使用了异步请求数据，可以使用 metaInfo() 方法。

<template>
  <div>
    <h1>{{{ title }}}</h1>
  </div>
</template>

<script>
  export default {
    name: 'post',
    data () {
      return {
        title: ''
        description: '这是一篇文章...'
      }
    },
    metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    },
    created () {
      this.initData()
    },
    methods: {
      initData () {
        axios.get('some/url').then((resp) => {
          // 设置title时 metaInfo 会同时更新
          this.title = resp.title
          this.description = resp.decription
        })
      }
    }
  }
</script>

再看一个实例：

 export default {
    name: 'DealRepair',
    metaInfo: {
      title: 'This is the test',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' }
      ]
    },
    data () {
      return {

      }
    },
    mounted(){
    },
    methods:{

    }
}

第三个实例，附与其它数据并存：

<template>
    <div>
        <div class="container">
            <ul class="list-unstyled">
            <li v-for="node in nodes" :key="node.NodeID"><a href=";" @click="navTo(node)">{{node.NodeName}}</a></li>
            </ul>


        </div>
    </div>
</template>

<script>
    export default{

        data:function(){
            var model={nodes:[]};
            var pid=this.$route.params.id;
            window.console.log(pid);
            this.jsp("node_list",{"pid":pid}).then((ret)=>{
                model.nodes=JSON.parse(ret.result);
            })
            return model;
        },
        metaInfo: {
            title: '节点列表',
            meta: [
                { description: '自动逻辑的列表' },
                { keywords: '节点,列表,栏目' },                
            ]
        },        
        methods:{
            navTo:function(node){
                this.$router.push("/NodeContent/"+node.NodeID);
            }
        },
    }
</script>

<style>
</style>