动态添加meta和title
vue动态设置title和meta标签
1.在router.js中添加meta 在main.js中监听路由的变化改变页面head中的标签 代码如下：
router.js
path: "/transfer/detail/:id",
name: "transfer/detail",
meta: {
title: "转店详情",
name: "xxx转店",
content: "xxx转店，租金xx元/月"
},
component: () =>
import(/* webpackChunkName: "TransferShopDetails" */ "@/views/TransferShopDetails.vue")
}
main.js
router.beforeEach((_to, _from, next) => {
if (_to.meta.content || _to.meta.name) {
let head = document.getElementsByTagName("head");
let meta = document.createElement("meta");
meta.content = _to.meta.content;
meta.content = _to.meta.name;
head[0].appendChild(meta);
}
/* 路由发生变化修改页面title */
if (_to.meta.title) {
document.title = _to.meta.title;
}
next();
});
2.window.open中打开新页面，找了半天自恋也没有发现简单高效的方法， 于是直接在跳转的页面组件内修改meta和title，多个页面需要些多次方法，代码如下：
document.title = this.detailsData.title;
let meta = document.getElementsByTagName("meta");
let meta1;
let meta2;
for (let i in meta) {
if (meta[i].name === "Keywords") {
meta1 = meta[i];
}
if (meta[i].name === "Description") {
meta2 = meta[i];
}
}
meta1.content =
this.detailsData.bigDistrictName +
this.detailsData.smallDistrictName +
"商铺出租,租金" +
this.detailsData.rent +
this.detailsData.rentShowUnit +
"，面积" +
this.detailsData.area +
"m²，无转让费";
meta2.content = this.detailsData.suitIndustry;
如果有更高效简洁的动态修改方法的话 敬请留言 共同学习
