Vue JS路由器组件-在路由之间导航后无法重用使用webpack导入的JS文件

Question

好吧，我现在讨论的这个问题有点复杂，但我会尽量弄清楚这里发生了什么。首先，我在我的webpack应用程序中使用了最新的Vue和Vue路由器。

这是一个名为

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中的所有功能（日期选择器等）都不再工作，而它第一次导入的样式仍然完好无损，并且是控制台。log（“cp created”）甚至不运行，这意味着它只加载cp.js一次，当您重新导航到/cp时，脚本的功能就消失了。所以你必须刷新页面才能再次工作，这正是我不想做的，因此我使用VueRouter。我试着在互联网上搜索有这个问题的人，尝试了“vue插件加载脚本”之类的插件，尝试卸载脚本，然后在创建和销毁组件时再次加载，但什么都不起作用。只有使用此代码的方法

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

甚至加载js文件都有效，因为“vue plugin load script”之类的插件无法识别esx语法。

当我在vue router中的组件之间导航时，是否有人知道每次重新创建组件时可以重用cp.js的方法？或者是另一种加载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();
});

编辑：在自定义文件中定义组件ID也是一种不好的做法。我建议使用vue-datepicker。他们有很多好吧，如果您仍然想使用自定义datepicker，您可以将htmlNode作为参数传递给您的initComponent函数。但我想最好的选择是创建名为datePicker的组件，并将所有js代码放入create方法中。您还可以将css文件打包到范围css部分中，而不是全局css。