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); }) } }, })