我正在将我的项目网站"转移"到 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 - 每次我关闭选项卡并打开一个新选项卡时，脚本都会再次工作，直到页面刷新/路由更改
你可以用 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>
这很丑陋，完全是一个坏主意，但这正是你所要求的。 使用Nuxt，您可以使用旧的链接元素而不是路由器链接或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>
我添加了一个链接/用于测试