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

Laravel 如何在Vue路由上使用多个组件,laravel,webpack,vue.js,vue-component,vue-router,Laravel,Webpack,Vue.js,Vue Component,Vue Router,我刚开始使用Vue,并尝试在路线中使用两个组件—导航栏和一些销售数据。Laravel mix将这些资产与Webpack捆绑在一起,而npm一直在失败 index.php <body> <div id="app"> <router-view name="nav"></router-view> <router-view></router-view> </div>

我刚开始使用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>
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>
它继续建议我应该检查我正在运行最新的节点和npm(我正在运行)


我做错了什么?奇怪的是,在尝试以这种方式包含导航组件之前,我将其注册为全局组件。它似乎注册得很好,但每当我在模板中包含它的元素标记时,npm就会以与上面相同的方式失败。

看起来节点不知怎么搞糊涂了。我删除了node_modules目录并重新安装了它,一切正常。

有一个博客解释了这个主题。是的,它起作用了,我试过了。
<template>
    <p>This is the Sales view</p>
</template>
<template>
    <p>This is the MAIN NAVIGATION</p>
</template>
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