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

Posted

技术标签:

【中文标题】Vue JS 路由器组件 - 在路由之间导航后无法重用使用 webpack 导入的 JS 文件【英文标题】:Vue JS router component - Cannot re-use JS file that uses webpack imports after navigating between routes 【发布时间】:2019-06-02 21:50:59 【问题描述】:

好的,所以我遇到的这个问题有点复杂,但我会尽量清楚地了解这里发生的事情。 首先,我在 webpack 的应用程序中使用了最新的 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 created”。 但是,当我移动到 vue 路由器中另一个组件的路径然后返回 /cp 时,cp.js 中的所有功能都不再起作用(日期选择器等),而它第一次导入的样式仍然是完好无损,并且 console.log("cp created") 甚至没有运行,这意味着它只加载 cp.js 一次,当您重新导航到 /cp 时,脚本的功能就消失了。所以你必须刷新页面才能让它再次工作,这正是我不想做的,因此我使用 VueRouter 的原因。 我尝试在整个互联网上搜索遇到问题的人,尝试使用诸如“vue-plugin-load-script”之类的插件来尝试卸载脚本并在创建和销毁组件时再次加载它,但没有任何效果。只有使用此代码的方法

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

甚至加载 js 文件也可以,因为像“vue-plugin-load-script”这样的插件无法识别 esx 语法。

有谁知道当我在 vue 路由器中的组件之间导航时再次创建组件时,我可以重用 cp.js 的方法?或者可能是一种不同的方法可以加载该 JS 文件...... 谢谢。

【问题讨论】:

您的“路由器视图”周围或其他地方是否有一个“保持活动”标签,可能会阻止再次创建组件? @qwsd 问题是再次创建了组件。您可以看到该 vue 组件的 console.log("created"),它只是没有第二次导入 JS 文件。 尝试将 const JS = () =&gt; import('cp.js'); 从创建部分移动到导入部分。在您在某处使用组件之前,该脚本不会获取,与您将其放入 create 的效果相同 @deathangel908 我确实将它移到了 main.js 中的导入部分,在那里我加载了所有内容(这不是正确的做法,但没关系),它仍然做同样的事情。 你想从你导入的脚本中得到什么?运行两次?浏览器中的脚本(也在节点中)只评估一次,这就是它的工作原理。您应该将代码移动到 cp.js 中的函数中,然后在需要的地方导入该函数。在您的情况下,您可以从 create 中调用它。将导入保留在此函数之外,它们会在编译时进行评估以组装您的 cp.js 【参考方案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-datepickers。 There're a lot of them 好吧,如果您仍想使用自定义日期选择器,您可以将 htmlNode 作为参数传递给您的 initComponent 函数。但我想最好的选择是创建名为 datePicker 的组件并将所有 js 代码放入 create 方法中。您也可以将 css 文件打包到 scoped css 部分,而不是使用全局 css。

【讨论】:

我将导入之后的所有 JS 代码移至 initComponents 导出函数,并按照您在我的 cp 组件的创建函数中所做的方式导入了 cp.js。有用!!!很好的答案。奇怪的是,这并没有写在任何地方,因为有这么多人使用 Vue 和 VueRouter 以及 webpack 和 esx 以及 NEED 组件来以这种方式运行。谢谢

以上是关于Vue JS 路由器组件 - 在路由之间导航后无法重用使用 webpack 导入的 JS 文件的主要内容,如果未能解决你的问题,请参考以下文章

组件内部的 Vue 路由器导航栏

vue.js路由vue-router——简单路由基础

路由导航守卫(导航钩子)

VUE—路由拓展(导航传参)

Vue.js 和 Firebase:删除了一个测试用户,现在所有路由都无法访问并且组件不呈现

vue.js关于路由的跳转