如何修复未知的自定义元素：<router-view>答案

【问题标题】：how to fix Unknown custom element: <router-view>如何修复未知的自定义元素：<router-view>
【发布时间】：2019-09-04 13:27:24
【问题描述】：

我将 vue-route 导入到我的 laravel vue 网站中的 app.js。可悲的是，有一个错误。能指导一下吗谢谢

app.js


require('./bootstrap');

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

let routes = [
    {path: '/', component: require('./components/Welcome.vue') }

]

const router = new VueRouter({
    mode: 'history',   
   routes
   })



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

master.blade.php

   <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
<body>
    <div id="app">

        @yield('content')

    </div>
</body

welcome.blade.php


@extends('layouts.master')

@section('content')

<router-view></router-view>
<vue-progress-bar> </vue-progress-bar>
@endsection

结果应该是 Welcome.vue 将显示。

【问题讨论】：

尝试将路由器放在您的 el 属性之上
它仍然有错误，先生@pinoyCoder

标签： laravel vue.js vue-router

【解决方案1】：

如果你使用较新版本的 Vue.js，你应该有 .default 到 require('./components/Welcome.vue')

所以第 5 行看起来像这样

    {path: '/', component: require('./components/Welcome.vue').default }

Stack Overflow: Why need default after require() method in Vue?

【讨论】：

它仍然有错误，先生。我的导入 vue-router 有问题吗？

【解决方案2】：

根据documentation，您应该注入router 选项以使您的整个应用程序路由器都知道。

所以你应该有这样的东西：

const app = new Vue({
  router
}).$mount('#app')

我认为这是 this 的副本。

【讨论】：