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

[wwwwzf]

先晒下版本 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="javascript:;" @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>