Question

我刚开始使用Vue，并尝试在路线中使用两个组件 - 导航栏和一些销售数据。 Laravel mix将资产与Webpack捆绑在一起，而npm一直在失败。

的index.php

<body>
    <div id="app">
        <router-view name="nav"></router-view>
        <router-view></router-view>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

app.js：

import './bootstrap';
import router from './routes';
const app = new Vue({
    el: '#app',
    router
});

routes.js：

import VueRouter    from 'vue-router';
import Sales        from './views/employer/sales/Sales.vue';
import MainNav      from './components/MainNav.vue';

let routes = [
    {
        path: '/sales',
        components: {
            default: Sales,
            nav: MainNav
        }
    }
];

export default new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});

Sales.vue

<template>
    <p>This is the Sales view</p>
</template>

MainNav.vue

<template>
    <p>This is the MAIN NAVIGATION</p>
</template>

来自npm的错误消息不是特别有启发性：

Failed at the @ dev script 'node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

它继续建议我应该检查我正在运行最新节点和npm（我是）。

我做错了什么？奇怪的是，在尝试以这种方式包含导航组件之前，我将其注册为全局组件。它看起来很好，但每当我在模板中包含它的元素标签时，npm将以与上面相同的方式失败。

Answer 1

看起来节点不知何故变得困惑。我删除了node_modules目录并重新安装它并且一切都很好。

如何在Vue路由上使用多个组件

1 个答案: