vue动态添加title，（keywords）关键字和description

vue动态添加title，（keywords）关键字和description
首先在router下的index.js设置路由
routes:[
{
path:’/home’,
component:Home,
meta: {
title: ‘先农氏-智能无人碾米机’,
content:{
keywords:‘先农氏,智能碾米机,先农氏智能无人碾米机’,
description:‘先农氏智能无人碾米机，中国首台智能无人碾米机，专利产品。拥有先进核心技术，更智能、碾米速度更快，噪音更小，操作更简便，现碾现售。新鲜，安全，营养。’
}
}
},
{
path:’/introduce’,
component:Introduce,
meta: {
title: ‘先农氏-智能无人碾米机-企业介绍’,
content:{
keywords:‘先农氏,智能碾米机,先农氏智能无人碾米机’,
description:‘先农氏智能无人碾米机，中国首台智能无人碾米机，专利产品。拥有先进核心技术，更智能、碾米速度更快，噪音更小，操作更简便，现碾现售。新鲜，安全，营养。’
}
}
},
{
path:’/cooperate’,
component:Cooperate,
meta: {
title: ‘先农氏-智能无人碾米机-招商合作’,
content:{
keywords:‘先农氏,智能碾米机,先农氏智能无人碾米机’,
description:‘先农氏智能无人碾米机，中国首台智能无人碾米机，专利产品。拥有先进核心技术，更智能、碾米速度更快，诚招加盟合作，政策多样。’
}
}
}
第二部在入口文件main.js中利用路由拦截
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面meta /
console.log(to.meta.content)
if(to.meta.content){
let head = document.getElementsByTagName(‘head’);
let meta = document.createElement(‘meta’);
document.querySelector(‘meta[name=“keywords”]’).setAttribute(‘content’, to.meta.content.keywords)
document.querySelector(‘meta[name=“description”]’).setAttribute(‘content’, to.meta.content.description)
meta.content = to.meta.content;
head[0].appendChild(meta)
}
/ 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
/当进行页面跳转时定位在页面顶部/
// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0
next()
})
最后在index.html中设置



<%= htmlWebpackPlugin.options.title %>