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

【问题标题】：How to use multiple components on a Vue route如何在 Vue 路由上使用多个组件
【发布时间】：2017-08-23 20:38:21
【问题描述】：

我刚开始使用 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 都会以与上面相同的方式失败。

【问题讨论】：

有一个博客解释了这个话题。 medium.com/@softwarecf/…
是的，它有效，我试过了。

标签： laravel webpack vue.js vue-component vue-router

【解决方案1】：

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

【讨论】：