Hey, I'm facing a bit of a complex issue here, but I'll do my best to explain it clearly. Currently, I'm using the latest versions of Vue and Vue-Router in my application with webpack.
The main component in question is called
CP.vue
<template>
...
</template>
<script>
export default {
data() {
return {
}
},
created() {
Load();
const JS = () => import('cp.js');
JS();
console.log("created");
},
mounted() {
Show();
},
destroyed() {
console.log("destroyed");
},
methods: { }
}
</script>
And this is how cp.js starts
cp.js
console.log("cp created");
// Bootstrap Datepicker
import '../../../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css';
// Switchery
import '../../../node_modules/mohithg-switchery/switchery.css';
// TreeView CSS
import '../../../node_modules/patternfly-bootstrap-treeview/dist/bootstrap-treeview.css';
// Datatables CSS
import '../../../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css';
// Datatables - Button CSS
import '../../../node_modules/datatables-buttons/css/buttons.dataTables.scss';
/////////////////////////// Toastr - for warnings
import '../../../node_modules/toastr/build/toastr.min.css';
////////////////////////// ScrollBar
import '../../../node_modules/perfect-scrollbar/src/css/main.scss';
// CSS
import '../../scss/pages/cp.scss';
.....
.... more JS code which never works the second time
.....
/*---------- DatePicker ----------*/
const datePicker = $('#date-range').datepicker({
toggleActive: true,
format: 'dd/mm/yyyy',
autoclose: true,
daysOfWeekHighlighted: "0,6",
weekStart: 1,
endDate: 'today',
maxDate: 'today',
startDate: '01/01/2014'
});
/*---------- ScrollBar ----------*/
$('#tree-container').perfectScrollbar();
// more code, but I've shortened it for brevity
^ The modules here are loaded using lazy-load. When I initially navigate to the path of CP.vue, the template displays and the JS file loads correctly. You can see "cp created" in the console. However, when I move to another component's path in the vue-router and then return to /cp, all the functionalities from cp.js stop working (date picker, etc), while the imported styles remain intact, and console.log("cp created") doesn't even execute, indicating that it only loads cp.js once, and when you revisit /cp, the script's functions are lost. This requires a page refresh for it to work again, which is not the ideal solution as I'm using VueRouter. I've searched high and low online for a solution, tried plugins like "vue-plugin-load-script" to unload and reload the script whenever the component is created and destroyed, but to no avail. Only the approach with using this code
const JS = () => import('cp.js');
JS();
Was successful in loading the js file because plugins like "vue-plugin-load-script" don't recognize esx syntax.
Anyone have a suggestion on how I can reuse cp.js every time the component is created again as I navigate between components in vue-router? Or perhaps a different approach that would effectively load that JS file... Appreciate any help!