seo vue 动态路由_给vue动态添加seo及title

image.png

在index.html内添加title,meta。

image.png

在路由内添加title，content配置

image.png

若添加if判断，在created内修改样式。

image.png

添加拦截器

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()

})