动态添加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;

如果有更高效简洁的动态修改方法的话  敬请留言  共同学习

 

转载于:https://www.cnblogs.com/start-from-today/p/11474799.html