vue.js - 在 JavaScript 文件中导入 Vue 路由器会导致“模块解析失败”错误
问题描述
我试图在axios的拦截器中访问路由器,但是当我在axios文件中导入文件时.js
,出现错误Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <template>
。
这是 router.js 文件的示例:
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = {
base: process.env.BASE_URL,
routes: [
{
path: "/settings",
name: "settings",
component: require('@/views/Settings.vue'),
}
]
};
export default new Router(router);
拦截器文件包含:
import router from './router';
解决方案
你为什么用require('@/views/Settings.vue')
?
而是尝试使用import
功能。
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = {
base: process.env.BASE_URL,
routes: [
{
path: '/settings',
name: 'settings',
component: () => import('@/views/Settings.vue'),
},
],
};
export default new Router(router);
PS:回答你的评论。在main.js
文件中导出实例变量:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
let vm = new Vue({
router,
render: h => h(App),
}).$mount('#app');
export default vm; // ATENTION HERE
在axios.js
文件中导入main.js
并访问$router
:
import vm from './main.js';
...
// YOUR INTERCEPTOR
vm.$router.push({ name: 'settings' });
...
推荐阅读
- javascript - 从请求中分派 redux 操作的正确方法
- java - 在delphi android应用程序中使用java .jar库的问题
- javascript - 无法从按钮操作 (JavaScript) 中获取表单字段
- c# - EF Core - 通过键值对的子集合过滤非常慢
- javascript - document.getElementsByName.length 在 IE 中返回 0
- javascript - 将 html 按钮和选择添加到 Highcharts
- python - 返回重定向的 SSL 错误(auth.login())
- git - git忽略除一种类型的文件之外的所有文件,任何地方
- typescript - 如何让 Typescript 理解在 value 为 null 时抛出的函数调用后 value 不能为 null
- c# - 列表
> 序列化