这是我的第一篇文章。我的问题如下,我有一个vuejs
使用的应用程序,vue-router
并且 vue 中的一个组件使用particle.js
. 我成功地使用 集成particle.js
到我的组件中$nextTick
,但是当我将嵌套路由添加到该组件的父组件时,particles.js
停止工作而没有错误。主应用分层如下:
应用程序.vue:
<template>
<div id="app">
<nav-bar />
<Title />
<router-view />
</div>
</template>
Particle.js在 'title' 组件中运行。
如下:
<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>
我认为这可能是 DOM 或使用嵌套路由渲染组件的方式的问题,因为当我从主组件中删除粒子时,粒子工作正常,当我再次添加它时,它似乎没有运行。但对于本应是一个简单项目的事情,我担心这有点超出我的深度。
更新:
我仍然不知道如何诊断。但是,我尝试使用不同的路由,当我进入一个不存在的路由时,例如:localhost:8080/#/route_that_doesnt_exist
粒子会出现,这意味着它仅在页面呈现嵌套路由之一时不起作用。我希望这有帮助。