模块 js import/export 问题 (vue.js)

Question

我正在尝试在 Laravel + Vue 中教授 SPA。

我有一些非常简单的组件。

<template>
    <p>Home</p>
</template>

<script>
    export default {
        name: 'Home'
    }
</script>

另外，我有一个路由文件

import Home from '../pages/home.vue';
import Profile from '../pages/profile.vue';


export let routes = [
    {
        path : '/home',
        component : Home
    },
    {
        path : '/profile',
        component : Profile
    }
];

npm 运行开发-"build successfull"

我附加了 router-link 标签并放置了 router-view。但是只有 .它给出了与 "out of the box" Laravel example-component.vue .

相同的结果

我的组件中的导入设置似乎有问题，但是什么？

Answer 1

问题出在项目结构中。我有一个 router/routes.js 和 app.js 文件

在 app.js 中，我从 routes.js 导入路由并创建新的 VueRouter。

错误是：

import {routes} from './router/routes';
let router = new VueRouter(routes);

应该是

import {routes} from './router/routes';
let router = new VueRouter({routes});

模块 js import/export 问题 (vue.js)

Module js import/export issue (vue.js)

javascript

laravel

vue-router

vue-component

vuejs2