vue dynamically add titles, keywords and descriptions to each page

Preface: Just write html and add titles and keywords, I believe everyone knows how to add them, but how do we dynamically add projects developed with vue framework to each page? ↓

First configure our title, keywords and descriptions

{
		path: '/train',
		name: 'Train',
		component: () =&gt; import('../components/page/'),
		meta: {
			title: 'Teacher Training-Enqi Official Website',
			content: {
				keywords: 'Teacher training, Enqi training, Enqiyun classroom, special education teachers, online service, Xu Ziwei, Wang Xuegang',
				description: 'Enqi Teacher Training focuses on improving professional skills training for teachers in the autism industry and evaluator training.  Provide scientific and systematic online courses and consulting services to autism rehabilitation teachers.  '
			}
		}
	},

Use beforeEach to judge

((to, from, next) => {
	if () {
		let head = ('head');
		let meta = ('meta');
		('meta[name="keywords"]').setAttribute('content', )
		('meta[name="description"]').setAttribute('content', )
		 = ;
		head[0].appendChild(meta)
	}
	if () {
		 = ;
	}
	next()
});

That's all.

Subsequently, the characteristics of vue are the component system and data driver. Well, it is particularly convenient. For example, in one of our components, we determine the initialization of loading different pages based on the routing status value (for example, there are three buttons on the previous page: Beijing, Shanghai, and Shenzhen). Click to enter different city pages, but our pages are all using the same component, as the following routing configuration: ↓

{
		path: '/cityDetail',
		name: 'CityDetail',
		component: () => import('../components/page/'),
		meta: {
			title: '',
			content: {
				keywords: '',
				description: ''
			}
		}
	},

We did not fill in the keywords here because it has several different cities to load, and we can add a judgment to the corresponding components.

if(orgUrl == 'beijing'){
 ('meta[name="keywords"]').setAttribute('content', 'Beijing Teaching and Research Center, Enqi Teaching and Research Center, IEDA Teaching and Research Center')
 ('meta[name="description"]').setAttribute('content', 'Enqi was born in 2014 and is a professional autism rehabilitation institution.  Beijing Teaching and Research Center is located at A5, Creative Life Park, No. 5, Hongyuan, opposite Sunhe Subway Station in Chaoyang District, Beijing. Contact information 13021253543, Beijing Teaching and Research Center.  ')
  = 'Enqi IDEA Beijing Teaching and Research Center-Direct Chain-Enqi Official Website';
}else if(orgUrl == 'shanghai'){
	 ('meta[name="keywords"]').setAttribute('content','Shanghai Jing'an Teaching and Research Center, Enqi Teaching and Research Center, IEDA Teaching and Research Center');
  ('meta[name="description"]').setAttribute('content', 'Enqi IDEA Jing'an Center is located in Shanghai Daning Center Square, adjacent to Daning Music Center, with convenient transportation and convenient life.  ');
  ='Enqi IDEA Shanghai Jing'an Teaching and Research Center-Direct Chain-Enqi Official Website';
}

This setting is OK;

Summarize

This is the article about how to add titles, keywords and descriptions to each page in vue dynamically. For more related vue to add titles, keywords and descriptions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!