如何在Laravel Project中正确包含VueRouter？

Question

我尝试在Laravel项目中实现VueRouter，但出现错误[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App'
import ExampleComponent from './components/ExampleComponent'
import ExampleComponent1 from './components/ExampleComponent1'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: ExampleComponent
        },
        {
            path: '/example',
            component: ExampleComponent1
        }
    ]
})

const app = new Vue({
    el: '#app',
    router,
    template: `<app></app>`,
    components: {
        App
    }
})

components / App.vue

<template>
    <div>
        <div>
            <router-link :to="'/'"></router-link>
            <router-link :to="'/example'"></router-link>
        </div>
        <div>
            <router-vue></router-vue>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

如何正确连接vue-router？

Answer 1

我发现您在<router-view />中误拼了App.vue，这很可能会引起警告。