(Nuxt.js/Vue.js) - 脚本只运行一次，更改路由/刷新页面后停止运行

关键词：

【中文标题】(Nuxt.js/Vue.js) - 脚本只运行一次，更改路由/刷新页面后停止运行【英文标题】：(Nuxt.js/Vue.js) - Script only works once, stops working after changing route/refreshing the page 【发布时间】：2019-08-16 09:51:21 【问题描述】：

我正在将我的项目网站“转移”到 Vue.js，顶部是 Nuxt.js。 我正在将存储在远程服务器中的所有文件的内容复制到本地“静态”文件夹。

一切正常，除了第一次加载页面时运行的 JavaScript，但是如果我通过路由切换到另一个页面，或者刷新当前页面，JavaScript 将停止工作。

例如，我的项目网站中有这个页面：http://archy-user.name/drag/

您基本上可以将图像拖到其他框，当您将鼠标悬停在带有图像的任何框上时，类会发生变化。

我将 CSS 复制到本地静态文件夹，工作正常，复制到 JavaScript，它只工作一次，在更改路由/刷新页面后停止工作......

它在您第一次加载页面时就像网站一样工作，但是在重新加载/更改路线后，脚本停止工作，并且在将鼠标悬停在框上时没有类更改等......尽管第一次工作正常页面已加载。

昨天在研究这个问题的时候，相关问题的回答说是因为页面加载时脚本只运行了一次，所以当路由改变或页面刷新时，脚本不会再次运行.

有人建议将页面加载时应该执行的函数添加到vue组件中“export default”内的“created()”方法中。

但是，就我而言，我并没有在每次加载页面时真正想要执行的内容，而是只想执行脚本的特定部分，这将是仅在以下情况下触发的特定功能某些操作是用户在页面中通过交互执行的...

没有必要每次都加载脚本，因为交互甚至可能不会发生，从而使脚本变得无用，加载时间也是如此。更不用说如果我将整个脚本添加到“created”方法中，组件会变得一团糟。

基本上我没有找到任何真正解决这个问题的方法，只有导致副作用的解决方法......

这是我的组件的结构（以下组件来自http://archy-user.name/drag）：

<template>
<div class="container">
    <div class="box">
        <div class="fill" draggable="true"></div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</template>

<script>
export default 
    name: 'Drag',
    head: 
        link: [  rel: 'stylesheet', type: 'text/css', href: 'css/drag.css' ],
        script: [  src: 'js/drag.js'  ]
    

</script>

<style>

</style>

有解决此问题的提示吗？或者针对我的情况的解决方法？

PS - 每次我关闭选项卡并打开一个新选项卡时，脚本都会再次运行，直到页面刷新/路由更改

【问题讨论】：

在您的示例中一切正常 - 不确定您的情况如何？你想在组件之外使用你的脚本吗？ 该脚本停止工作，就好像它在页面刷新后根本没有链接一样，或者当我转到主页并返回当前页面时，虽然它在页面第一次运行时工作加载到当前标签中 【参考方案1】：

你可以用 vue 组件风格重写你的代码。它会更清楚。并且易于重复使用

 <template>
  <div class="drag">
    <div
      v-for="n in range"
      :key="n"
      class="box"
      @dragenter="dragEnter"
      @dragover="dragOver"
      @dragleave="dragLeave"
      @drop="dragDrop"
    >
      <div
        v-if="n === 1"
        class="fill"
        draggable="true"
        @dragstart="dragStart"
        @dragend="dragEnd"
      />
    </div>
  </div>
</template>

<script>
export default 
  name: 'Drag',
  props: 
    range: 
      type: Number,
      default: 5
    
  ,
  data() 
    return 
      dragged: ''
    
  ,
  methods: 
    dragEnter: function(e) 
      e.target.className += ' hovered'
    ,

    dragOver: function(e) 
      e.preventDefault()
    ,

    dragLeave: function(e) 
      e.target.className = 'box'
    ,

    dragDrop: function(e) 
      e.target.className = 'box'
      e.target.appendChild(this.dragged)
    ,

    dragStart: function(e) 
      e.target.className += ' ondrag'
      this.dragged = e.target
      setTimeout(() => (e.target.className = 'invisible'), 0)
    ,

    dragEnd: function(e) 
      e.target.className = 'fill'
    
  

</script>

<style>
.drag 
  background-color: darksalmon;
  display: flex;
  justify-content: flex-start;


.box 
  background-color: white;
  width: 160px;
  height: 160px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin-right: 15px;
  border: 3px white solid;


.fill 
  background-image: url('http://source.unsplash.com/random/150x150');
  width: 150px;
  height: 150px;
  margin: 5px 5px;
  cursor: pointer;


.ondrag 
  border: solid #ccc 4px;


.invisible 
  display: none;


.hovered 
  background: #f4f4f4;
  border-style: dashed;

</style>

【讨论】：

这是解决问题的唯一方法吗？我真的不想这样做，因为对所有页面都需要一段时间......并且组件中可能有太多功能，具体取决于脚本 另外，有没有办法在外部 JavaScript 文件中设置方法，并在组件内部使用它们而不从其中导入函数？例如，在元素的 div 中设置 vue 方法，并在外部 JavaScript 文件中定义相同的函数名称，该文件与页面一起加载 也感谢您花时间为我制作这个sn-p！我很感激 这不是唯一的方法，但是如果您要迁移到 vue 和 Nuxt，它会更好地封装在易于重用的组件中，但这是 Vue 的一部分魔法，它可以与旧的共存代码。我看到了您的网站，我认为您可以更轻松地在 nuxt 中使用 generate 来创建静态网站，我很确定您的收费问题将会消失，nuxtjs.org/guide【参考方案2】：

这是丑陋的，完全是一个坏主意，但正是你所要求的。使用 nuxt，您可以使用旧的链接元素而不是 router-link 或 nuxt-link 绕过导航问题，从而强制刷新整个页面。

记住 nuxt 在通用模式下，服务器渲染第一页，导航的其余部分作为 SPA 实时重新加载，您的问题与 addEventListener 相关，因为在第一次访问时您添加了它，但您从不删除它们。

所以使用链接元素进行导航，你强制刷新整个页面，每次都会是第一次访问。之后为了确保元素在应用之前存在，您可以在模板底部添加脚本，页面将是：

<template>
  <div>
    <a href="/">
      go Home
    </a>
    <div class="container">
      <div class="box">
        <div
          class="fill"
          draggable="true"
          dragstart="dragStart"
          dragend="dragEnd"
        />
      </div>
      <div class="box" />
      <div class="box" />
      <div class="box" />
      <div class="box" />
      <div class="box" />
    </div>
    <script src="js/drag.js" />
  </div>
</template>

<script>
export default 
  name: 'Drag',
  head: 
    link: [ rel: 'stylesheet', type: 'text/css', href: 'css/drag.css' ]
  

</script>

我添加了一个指向 / 的链接用于测试

【讨论】：

我已经试过了，也有一些副作用，我想我会接受你的第一个建议

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

Nuxt js (vue js) 禁用默认头链接

】Nuxtjs(vuejs)禁用默认头链接【英文标题】：Nuxtjs(vuejs)Disableddefaultheadlinks【发布时间】：2022-01-2306:32:26【问题描述】：我正在创建一个系统，我正在为我的应用程序的前端使用vue-nuxt框架。到目前为止，这是一个很棒的js框架，但... 查看详情

当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失

】当nuxt.js(vue.js)中的路由更改时，Facebook分享按钮消失【英文标题】：Facebooksharebuttondisappearwhenroutechangedinnuxt.js(vue.js)【发布时间】：2021-11-1913:01:57【问题描述】：在我的nuxt.js("nuxt":"^2.15.7")网络应用程序中，我正在使用fullcodeexampl... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

如何将 Naver Analytics 添加到 Nuxt.js SPA 应用程序？

】如何将NaverAnalytics添加到Nuxt.jsSPA应用程序？【英文标题】：HowtoaddNaverAnalyticstoNuxt.jsSPAapplication?【发布时间】：2020-04-0422:37:43【问题描述】：如何使用s-s-r在nuxt.js(Vue.js)中向网站添加跟踪代码？NaverAnalytics跟踪代码示例：<script... 查看详情

如何确保脚本运行一次且只运行一次

】如何确保脚本运行一次且只运行一次【英文标题】：Howtomakesureascriptrunsonceandonlyonce【发布时间】：2012-01-0815:57:33【问题描述】：我正在编写一个小部件模板，它将包含在安装它的页面中。一个人可能会在一个页面中安装多个相... 查看详情

如何在 Nuxt 中使路由区分大小写

】如何在Nuxt中使路由区分大小写【英文标题】：HowtomakeroutescasesensitiveinNuxt【发布时间】：2019-12-2017:32:18【问题描述】：我使用nuxt.js+vue.js。我需要创建路由器的区分大小写。我发现了以下属性：caseSensitive。我正在尝试将它放入n... 查看详情

我的移动菜单 Jquery 脚本只运行一次

】我的移动菜单Jquery脚本只运行一次【英文标题】：MymobilemenuJqueryscriptonlyrunsonce【发布时间】：2016-08-1600:22:28【问题描述】：您好，我是jquery的新手，只是想将一个简单的脚本放在一起以在点击时显示/隐藏我的移动菜单。它工... 查看详情

PHP锁定/确保给定脚本在任何给定时间只运行一次

】PHP锁定/确保给定脚本在任何给定时间只运行一次【英文标题】：PHPlocking/makingsureagivenscriptisonlyrunningonceatanygiventime【发布时间】：2012-01-3116:55:54【问题描述】：我正在尝试编写一个PHP脚本，我想确保它在任何给定时间都只有一... 查看详情

每个会话只运行一次 JS 文件

...ion【发布时间】：2021-07-1617:56:50【问题描述】：我有这个脚本的JS文件：（我编辑了我的脚本并添加了sessionStorage检查）letexecuted=window.sessionStorage.getItem("sessionCodeExecuted")console.log(executed)leturi=window 查看详情

为啥我的函数在每次页面加载时只运行一次？

...布时间】：2012-08-1301:45:28【问题描述】：我正在编写一个脚本，该脚本使用表单中的文本输入进行计算。出于某种原因，我的计算在每次页面加载时只执行一次。当我按下“计算”按钮时，我必须刷新页面才能再次运行该功能。... 查看详情

如果我计划运行一个使用pyautogui的python脚本，它可以同时执行多台计算机还是只执行一台计算机？

就像我上传到AWS的脚本一样pyautogui.moveTo（0,0）它可以同时移动多台计算机的鼠标吗？谢谢！答案我是PyAutoGUI的作者。PyAutoGUI只能在您的单个本地计算机上运行。它无法在AWS或其他“无头”设置上运行。这可能会在未来添加为功... 查看详情

如何使一行代码在循环中运行一次，并且只运行下一行代码，直到前一行运行一次？

...ioushasranonce?【发布时间】：2019-10-3114:42:57【问题描述】：脚本代码用于机器人，由一组代码组成，这些代码是放置产品的路点。我想通过只运行一行代码来节省 查看详情

使用不同的数据在 Postman 中多次运行请求只运行一次

...无法解决的反复出现的问题。我正在尝试使用在Pre-request脚本上建立的数据数组多次运行相同的请求，但是，当我转到运行器时，请求只运 查看详情

windows调度程序每x分钟运行一次批处理脚本（.bat）？ [复制]

】windows调度程序每x分钟运行一次批处理脚本（.bat）？[复制]【英文标题】：windowsschedulertorunabatchscript(.bat)everyx-minutes?[duplicate]【发布时间】：2017-08-2518:33:42【问题描述】：我试图让Windows调度程序每30分钟左右运行一次特定的.bat... 查看详情

Cron 作业——每 5 秒运行一次

...：2011-03-2021:10:51【问题描述】：我想创建每5秒运行一次脚本的cron作业。看到cron作业只允许0-59分钟的增量，依此类推。我想创建另一个脚本来调用下面编写的原始脚本。#!/bin/bashwhiletruedo#scriptinthesamedirectoryasthisscript.isthisco 查看详情

bat 脚本只运行第一行？

】bat脚本只运行第一行？【英文标题】：batscriptonlyrunsfirstline?【发布时间】：2012-03-0521:55:44【问题描述】：当我将下面的行复制/粘贴到cmd窗口中时，它可以毫无问题地执行。"C:\\ProgramFiles(x86)\\MicrosoftVisualStudio10.0\\VC\\bin\\vcvars32.ba... 查看详情

按键精灵，脚本怎么让一小段在全部脚本里只执行一次

按键精灵，脚本怎么让一小段在全部脚本里只执行一次按键精灵是按从上往下进行脚本操作的，但是我用两个规定区域识图的命令，它识别并操作第一个命令后，是正常从上往下，它识别操作完第二个识图命令后看到第一个命令... 查看详情