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;
如果有更高效簡潔的動態修改方法的話 敬請留言 共同學習