Компонент Vue JS router - Невозможно повторно использовать файл JS, который использует импорт веб-пакетов после перехода между маршрутами.

Question

Хорошо, так что этот вопрос у меня немного сложнее, но я постараюсь максимально ясно понять, что здесь происходит. Прежде всего, я использую последние Vue и Vue-Router в своем приложении с веб-пакетом.

Это однофайловый компонент с именем

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>

А вот так начинается cp.js

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();
// there's more, but it's a long file so I cut it short

^ Модули здесь загружены с отложенной загрузкой. Когда я впервые перехожу к пути CP.vue, шаблон показывает, и файл JS загружается нормально. Вы можете увидеть «cp создан» в консоли. Однако, когда я перехожу к пути другого компонента в маршрутизаторе vue и затем возвращаюсь в / cp, все функции из cp.js больше не работают (средство выбора даты и т. Д.), В то время как стиль, импортированный в первый раз, все еще сохраняется. intact, и console.log («cp создан») даже не запускается, что означает, что он загружает cp.js только один раз, а при повторном переходе к / cp функции скрипта исчезают. Поэтому вы должны обновить страницу, чтобы она снова заработала, а это именно то, чего я не хочу делать, поэтому я использую VueRouter. Я попытался найти людей, у которых возникла проблема, по всему Интернету, попробовал плагины, такие как «vue-plugin-load-script», чтобы попытаться выгрузить сценарий и загрузить его снова всякий раз, когда компонент создается и уничтожается, но ничего не работает. Только подход с использованием этого кода

const JS = () => import('cp.js');
JS();

Даже загрузка файла js работает, потому что плагины типа "vue-plugin-load-script" не распознают синтаксис esx.

Кто-нибудь знает, как я могу повторно использовать cp.js eveytime, когда компонент создается снова, когда я перемещаюсь между компонентами в vue router? Или, может быть, другой подход, который будет работать для загрузки этого файла JS ... Спасибо.

Answer 1

Как я уже сказал, вам следует переделать свой код. Сценарий оценивается только один раз, вы ничего не можете с этим поделать, и это правильно, как он должен работать.

cp.js

export function initComponents()  {
  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();
}

и из вашего компонента:

import( /* webpackChunkName: "cp.js" */ 'cp.js').then(exports => {
  exports.initComponents();
});

EDIT : Также это плохая практика - определять идентификаторы компонентов в вашем файле. Я бы порекомендовал использовать vue-datepickers. Их много Что ж, если вы все еще хотите использовать пользовательский указатель даты, вы можете передать htmlNode в качестве параметра вашей функции initComponent. Но я думаю, что лучшим выбором будет создание компонента с именем datePicker и помещение всего кода js в метод create. Также вы можете упаковать ваши css файлы в секцию scoped css вместо глобального css.