Vue 不渲染

Question

根据here 的帮助，我创建了以下内容 app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
 import Vue from 'vue'
 import VueRouter from 'vue-router'

 import App from './app.vue'
 import welcome from './components/pages/Welcome'
 import about from './components/pages/About'
 import contact from './components/pages/Contact'

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('passport-clients', require('./components/passport/Clients.vue'));
Vue.component('passport-authorized-clients', require('./components/passport/AuthorizedClients.vue'));
Vue.component('passport-personal-access-tokens', require('./components/passport/PersonalAccessTokens.vue'));

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'welcome', component: Welcome },
  { path: '/about', name: 'about', component: About },
  { path: '/contact', name: 'contact', component: Contact }
]

const router = new VueRouter({
  mode: 'history',
  routes // short for `routes: routes`
});

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

和 App.vue

<template>
  <div id="app">
    <Navbar v-if="isHome" />
    <router-view></router-view>
    <Footer />
  </div>
</template>

<script>
  import Navbar from './components/includes/Navbar.vue'
  import Footer from './components/includes/Footer.vue'
  export default{
    components: {
      'Navbar': Navbar,
      'Footer': Footer
    }
  }
</script>

组件/页面文件夹中的Welcome.vue

<template>
  <div>
  <h3>This is the Index page</h3>
  </div>
</template>

<script>
  export default {}
</script>

components/includes 文件夹中的导航栏组件

<template>
  <div>
  <h3>This is the Navbar</h3>
  </div>
</template>

<script>
  export default {}
</script>

同样，我创建了所有其他页面、导航栏、页脚组件。当我运行 npm run dev 时，它说构建成功。当我访问 localhost:800 url 时，vue 不会呈现。 Chrome 检查器控制台选项卡显示 Uncaught ReferenceError: Welcome is not defined

我还需要从 web.php 中删除索引路由

Answer 1

JavaScipt 区分大小写，变量“welcome”与“Welcome”不同。

import welcome from './components/pages/Welcome'
{ path: '/', name: 'welcome', component: Welcome },

改为：

{ path: '/', name: 'welcome', component: welcome },

它应该可以工作。对其余变量执行相同操作 - about 和 contact。