vue修改网站标题，关键词，描述--js文件引用版

最新推荐文章于 2023-12-07 16:30:32 发布

橙-极纪元JJY.Cheng

最新推荐文章于 2023-12-07 16:30:32 发布

阅读量767

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cplvfx/article/details/113388808

版权

VUE 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

代码

这两种写法效果是一样的，不过加载页面的时候，title会先显示插值表达式{{Seo.SeoTitle}}，在显示数据。

推荐：第二种写法 v-text="Seo.SeoTitle"

<title>{{Seo.SeoTitle}}</title>
<title v-text="Seo.SeoTitle"></title>

 <!DOCTYPE html>
<html>

<head id="head">
	<meta charset="utf-8"> 
    <title v-text="Seo.SeoTitle"></title>
	<script src="js/vue.min.js"></script>
	<meta name="keywords" :content="Seo.SeoKeywords">
	<meta name="description" :content="Seo.SeoDescription">
</head>

<body>
	<h1>vue修改网站标题，关键词，描述</h1>
	 
	<script>
		var head = new Vue({
			el: '#head',
			data: {
				Seo: {
					SeoTitle: '',
					SeoKeywords: '',
					SeoDescription: ''
				},
			},
			mounted() {
				this.getSEO();
			},
			methods: {
				getSEO() {
					let that = this;
					that.Seo.SeoTitle = "SeoTitle网站标题";
					that.Seo.SeoKeywords = "SeoKeywords关键词";
					that.Seo.SeoDescription = "SeoDescription描述";
				},
			},
		});
	</script>

</body>

</html>

结果

axios请求

<head id="head">
	<meta charset="utf-8">
	<title v-text="Seo.SeoTitle"></title>
	<meta name="keywords" :content="Seo.SeoKeywords">
	<meta name="description" :content="Seo.SeoDescription"> 
</head>
<!-- seo -->
<script>
    var head = new Vue({
        el: "#head",
        data: {
            //seo
            Seo:{ SeoTitle: '', SeoKeywords: '', SeoDescription: ''},
        },
        mounted() {
            //seo
            this.getSEO();
        },
        methods: {
            //seo、、、、、、、、、、、、、、
            getSEO() { 
                let that = this;
                axios.get(CmsAPI + '/zixun/getWebsite', {
                    params: {
                        SiteName: 'quanxi' 
                    }
                }).then(res => { 
                    let seoData=res.data.data[0];  
                    that.Seo.SeoTitle = seoData.SeoTitle==null?seoData.name:seoData.SeoTitle;
                    that.Seo.SeoKeywords = seoData.SeoKeywords==null?seoData.name:seoData.SeoKeywords;
                    that.Seo.SeoDescription = seoData.SeoDescription==null?seoData.name:seoData.SeoDescription;
                }).catch(function(error) { // 请求失败处理  
                    console.error('SEO-error');
                    console.error(error);
                });
            },
        },
    });
</script>
<!-- seo end -->