Why the error runs – Uncaught SyntaxError: The requested module '/src/router/index.js' does not provide an export named 'default' at main.js vue?

huangapple go评论75阅读模式
英文:

Why the error runs - Uncaught SyntaxError: The requested module '/src/router/index.js' does not provide an export named 'default' at main.js vue?

问题

At vite vue runs the error - Why the error runs - Uncaught SyntaxError: The requested module '/src/router/index.js' does not provide an export named 'default' at main.js vue ? What is wrong ?

https://stackblitz.com/edit/vue3-vite-starter-ywq59j?file=package.json,src%2Fcomponents%2FFooter.vue,src%2Fcomponents%2FHeader.vue,src%2Fcomponents%2FMain.vue,src%2Fcomponents%2FNotMain.vue,src%2Fviews%2FHome.vue,src%2Fviews%2FShops.vue,src%2FApp.vue,src%2Fmain.js,public%2Ffavicon.ico

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// main.js

import { createApp } from 'vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

// router index.js

import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Shops from '../views/Shops.vue';
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/shops',
name: 'Shops',
component: Shops,
},
],
});

export default router;

<!-- end snippet -->

英文:

At vite vue runs the error - Why the error runs - Uncaught SyntaxError: The requested module '/src/router/index.js' does not provide an export named 'default' at main.js vue ? What is wrong ?

https://stackblitz.com/edit/vue3-vite-starter-ywq59j?file=package.json,src%2Fcomponents%2FFooter.vue,src%2Fcomponents%2FHeader.vue,src%2Fcomponents%2FMain.vue,src%2Fcomponents%2FNotMain.vue,src%2Fviews%2FHome.vue,src%2Fviews%2FShops.vue,src%2FApp.vue,src%2Fmain.js,public%2Ffavicon.ico

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // main.js

    import { createApp } from &#39;vue&#39;
    import &#39;bootstrap/dist/css/bootstrap.css&#39;
    import &#39;bootstrap/dist/js/bootstrap.js&#39;
    import App from &#39;./App.vue&#39;
    import router from &#39;./router&#39;

    const app = createApp(App)

    app.use(router)

    app.mount(&#39;#app&#39;)

// router index.js

import VueRouter from &#39;vue-router&#39;;
import Home from &#39;../views/Home.vue&#39;;
import Shops from &#39;../views/Shops.vue&#39;;
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    {
      path: &#39;/&#39;,
      name: &#39;Home&#39;,
      component: Home,
    },
    {
      path: &#39;/shops&#39;,
      name: &#39;Shops&#39;,
      component: Shops,
    },
  ],
});

export default router;

<!-- end snippet -->

答案1

得分: 0

请分享 /src/router/index.js 的代码。从您通过 stackblitz 分享的代码中,我看到 router 文件夹内的 index.js 是空的。

请在 router/index.js 内添加一个导出,例如参考以下内容:

export default expression;
export default function functionName() { /* … */ }
export default class ClassName { /* … */ }
export default function* generatorFunctionName() { /* … */ }
export default function () { /* … */ }
export default class { /* … */ }
export default function* () { /* … */ }

这些都是您可以使用的导出默认的方式。请参考 MDN 文档以了解更多关于如何使用导出的信息:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

编辑解决方案:
在 router/index.js 中更新为 import * as VueRouter from 'vue-router';,应该可以解决问题。这个错误是因为 vue-router 使用了命名导出而不是默认导出所引起的。

英文:

Can you please share /src/router/index.js code? What I can see in the code you have shared via stackblitz is index.js inside router folder is empty.

Please add an export inside router/index.js, for example refer below

export default expression;
export default function functionName() { /* … */ }
export default class ClassName { /* … */ }
export default function* generatorFunctionName() { /* … */ }
export default function () { /* … */ }
export default class { /* … */ }
export default function* () { /* … */ }

These are all types of export default you can use..
Please refer MDN Docs to know more about how to use export
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Edit Solution :
import * as VueRouter from &#39;vue-router&#39;;
Update this in router/index.js and it should work. This error occurs because vue-router has a named export instead of a default export

答案2

得分: 0

你必须以以下方式声明路由并从路由文件(src/router/index.js)中导出。

import { createRouter, createWebHistory } from "vue-router";
const routers = {
  { path: '/', name: 'NameOfTheComponent', component: () => import('组件路径') }
}

const router = createRouter({ history: createWebHistory(), routes: routers });
export default router;

正如你所看到的,最后一行将定义的路由文件导出到你想要导入并用作路由的组件中。

英文:

you must declare the router in the following manner and export from the router file (src/router/index.js).

import { createRouter, createWebHistory } from &quot;vue-router&quot;;
const routers={
{path:&#39;/&#39;,name:&#39;NameOfTheComponent&#39;,component:()=&gt;import(&#39;pathof the component&#39;)
}

const router=createRouter({history:createWebHistory(),routers});
export default router;

as you see the last line is exporting the defined router file to the the component that you want to import and use it as a router.

答案3

得分: 0

我认为你忘记在路由器代码的末尾添加

export default router;
英文:

I think you forget to put

export default router;

At the end of the router code.

huangapple
  • 本文由 发表于 2023年5月22日 00:47:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76300956.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定