好吧,我遇到的这个问题有点复杂,但我会尽量弄清楚这里发生的事情。 首先,我在带有 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
^ 这里的模块都是用lazy-load加载的。 当我第一次导航到 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 文件...... 谢谢。
最佳答案
正如我所说,您应该重新设计代码。该脚本仅被评估一次,您无能为力,这是它应该工作的正确方式。
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。
关于javascript - Vue JS 路由器组件 - 在路由之间导航后无法重新使用使用 webpack 导入的 JS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54087814/