1.router文件夹下index.js中设置title
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: { title: '首页' }
},
{
path: '/design',
name: 'design',
component: design,
meta: { title: '网站设计' }
},
{
path: '/shopping',
name: 'shopping',
component: shopping,
meta: { title: '商城系统' }
}
]
})
2.main.js中调用seo接口,并设置每个页面的title,关键词,描述
new Vue({
el: '#app',
render: h => h(App),
router,
components: { App },
template: '<App/>',
data: {
keywords: "",
description: "",
title: "",
viewId: 1
},
created() {
this.getSEO();
// 全局配置
router.beforeEach((to, from, next) => {
// Change doc title
if(to.meta.title == '拓美科技'){
this.viewId = 1;
}else if(to.meta.title == '商城系统'){
this.viewId = 2;
}
console.log(this.viewId);
this.getSEO(this.viewId);
next();
})
},
methods: {
//获取seo
getSEO(viewId) {
this.$axios.post("/get_seo",{
"view_id": this.viewId
}).then((response) => {
let res = response.data;
console.log(res.data);
if(res.status == 1){
this.keywords = res.data.key_words;
this.description = res.data.description;
this.title = res.data.title;
document.title = this.title || '拓美科技';
// document.title = to.meta.title || '拓美科技'
document.querySelector('meta[name="Keywords"]').setAttribute('content', this.keywords)
document.querySelector('meta[name="Description"]').setAttribute('content', this.description)
}else{
this.$layer.msg(res.message);
}
}).catch((err) =>{
console.log(err);
})
}
},
})