nuxt在当前页面注入js代码

karlge

已于 2022-06-02 21:12:49 修改

阅读量1.2k

点赞数

分类专栏： nuxt 文章标签： javascript 前端

于 2022-06-02 21:12:11 首次发布

本文链接：https://blog.csdn.net/weixin_46331416/article/details/125101235

版权

nuxt 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引言：公司为统计用户的点击率,提高产品的转化率，引入一段谷歌分析代码，要求在该按钮和链接所在的页面激活这段代码，放在< head >标签中

直接使用nuxt中的head方法

官网使用如下

<script>
  export default {
    data() {
      return {
        title: 'Hello World!'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',    //meta中的唯一标识符
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    }
  }
</script>

发现并没有注入js的说明，但是原理都是一样的，head标签下的标签，有什么属性，只是换了中表达方式，有两种注入方式：
- 引入cdn外部js

 head() {
   return {
      title: this.title,
      meta: [
       {
          hid: 'description',    //meta中的唯一标识符
          name: 'description',
          content: 'My custom description'
        }
      ]，
        
      script:[
      {
        type: 'text/javascript',
        src:' https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js',
        body: true //<script>是否在body中
     }
    ]
   }

而我要引入的是一段代码，直接用innerHTML

script:[
   {
     type: 'text/javascript',
     src:' https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js',
     innerHTML:`function(a,h,c,b,f,g){......};`
    }
  ]

之后就可以在当前页面调用这个function了从而激活分析代码，显示在head标签下：

<head>
....
<script type="text/javascript">
	function(a,h,c,b,f,g){......};
</script>
....
</head>

karlge

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
nuxt在当前页面注入js代码

nuxt中在当前页面中注入js代码
复制链接

扫一扫

专栏目录

nuxt在当前页面注入js代码

直接使用nuxt中的head方法

“相关推荐”对你有帮助么？