添加路由到我的Laravel Vue项目不工作

w8biq8rn  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(115)

我想显示的网页登录和注册的路线。
我运行命令:

npm run watch.

我得到了错误:

"default" is not exported by "node_modules/vue/dist/vue.esm-bundler.js", imported by "resources/js/app.js".

我的代码是:
在resocues/js/app.js中:

import './bootstrap';
window.Vue = require('vue');
import Vue from 'vue';
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// Router imported
import{ routes} from './routes';

const router = VueRouter.createRouter({
mode: "history",
routes, // short for `routes: routes`
  
})

const app = new Vue({
el: '#app',
router
})

在resouces/js/routes.js中:

let login = require('./components/auth/login.vue').default;
let register = require('./components/auth/register.vue').default;

export const routes = [
    { path: '/', component: login, name: '/' },
    { path: '/register', component: register, name:'register' }
]

我在身体后面加了

\<div id="app"\> and \<router-view\>\</router-view\>

所以我想显示页面Login(在components/auth/login.vue中创建)和Register(在components/auth/register.vue中创建)。
我的代码有什么问题?
我尝试显示登录和注册页面。

0lvr5msh

0lvr5msh1#

我和你有同样的问题。为了解决这个问题,我检查了文件““node_modules/vue/dist/vue.esm-configurler.js”,这个文件中没有export default,而是类似于这样的东西:export { NavigationFailureType, RouterLink, ... };。因此解决方案看起来像这样:

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '.routes'

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

const app = createApp({})
    .use(router);
    
app.mount('#app');

相关问题