Nuxt.js 里 添加 <head>

Nuxt.js 将 <link rel=“canonical“ href=“当前页面对应网址“> 加到所有页面的 <head> 上

利用 mixin 全局混入

在 plugins 文件里 创建 globalMixin.js,代码如下:

import Vue from "vue";

Vue.mixin({
  head() {
    if (this.$route) {
      return {
        link: [
          {
            rel: "canonical",
            href: `https://www.marketmonitorglobal.com.cn${
              this.$route.fullPath ? this.$route.fullPath : ""
            }`,
          },
        ],
      };
    } else {
      return {};
    }
  },
});

在 nuxt.config.js 里面  

plugins: [
  { src: '~/plugins/globalMixin.js', ssr: true}
]

ssr 为 true 一开始进来服务端才会去执行这个文件,
不为 true 首次打开网站头部 <head> 里面不会有 添加的  <link>

这样俩个步骤就解决啦!

所以页面的 <head> 都添加 <meta>,<link>,<script>

直接在 app.html 文件里面添加, 如下图示例:

单个页面的 <head> 都添加 <meta>,<link>,<script> 

直接在 对应的 .vue 文件里面 的  head() 方法里面添加。如下图示例:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值