这是我的第一篇文章。我的问题如下：我有一个使用vuejs的{{1}}应用，而vue中的组件之一使用了vue-router。我可以使用particle.js成功地将particle.js集成到我的组件中，但是当我向该组件的父组件添加嵌套路由时，$nextTick停止了运行，没有错误。主应用程序分层如下：
App.vue：
particles.jsParticle.js 正在“标题”组件中运行。
如下：
<template>
<div id="app">
<nav-bar />
<Title />
<router-view />
</div>
</template>
我认为这可能与DOM或使用嵌套路由呈现组件的方式有关，因为当我从主组件中删除时，粒子可以正常工作，而当我再次添加它时，它似乎没有运行。但是我担心对于一个本来应该做的简单项目来说，这超出了我的理解范围。
更新：
我仍然不知道如何诊断。但是，我尝试使用不同的路线，并且当我进入一条不存在的路线时，例如：<template>
<div id="particles-js"></div>
</template>
<script>
export default {
name: "Title",
mounted() {
require("particles.js");
this.$nextTick(() => {
this.initParticlesJS();
});
},
methods: {
initParticlesJS() {
/* eslint-disable */
particlesJS("particles-js", {
particles: {
number: {
value: 8,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#2d3bff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#2d3bff"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 10,
random: true,
anim: {
enable: false,
speed: 80,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 300,
color: "#2d3bff",
opacity: 0.8,
width: 2
},
move: {
enable: true,
speed: 12,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 800,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 800,
size: 80,
duration: 2,
opacity: 0.8,
speed: 3
},
repulse: {
distance: 400,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
}
}
};
</script>
<style scoped>
#particles-js {
position: absolute;
z-index: 0;
height: 100%;
width: 100%;
}
</style>
将会显示粒子，这意味着仅当页面呈现其中一个时，它才起作用。嵌套路线。我希望这会有所帮助。