Vue router не может загрузить компонент - PullRequest
Новая
       16

Vue router не может загрузить компонент

0 голосов
/ 27 декабря 2018

main.js: 

import Vue from 'vue';
import App from './App';
import router from './routes/Route';
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  render: h => h(App),
  router
})

Route.js: 

import Vue from "vue";
import VueRouter from "vue-router";
import Routes from "./Routes";
Vue.use(VueRouter);
export default new VueRouter({
  mode: 'history',
  Routes
});

Routes.js: 

import About from '../components/About';
import Work from '../components/Work';
import Contact from '../components/Contact';
export default [
    {
      path: '/about',
      name: 'about',
      component: About
    }
]

Menu.vue: 

<template>
    <div class="menu-top">
        <router-link class="menu-href-route" to="/about"><span>About</span></router-link>
    </div>
</template>
<script>
export default {
    name: 'Menu',
}
</script>

Hello.vue: 

<template>
    <div class="hello">
        <router-view></router-view>
    </div>
</template>
<script>
import About from './About';
    export default {
        name: "Hello"
    }
</script>

About.vue: 

<template>
    <div>
        About test text
    </div>
</template>

<script>
    export default {
        name: "about"
    }
</script>

Я создаю в файле Route.js маршрутизацию и экспортирую его в main.js.Далее в файле Routes.js я создаю путь к компонентам.В файле Menu.js есть роутер-ссылка.А в файле Hello.vue есть роутер-просмотр.About.vue является компонентом просмотра.Я не знаю, почему компонент About.vue не загружается в файл Hello.vue, когда у меня есть адрес: http://localhost:8080/about.Я переустанавливаю узел и vue-router, но это не помогает.

1 Ответ

0 голосов
/ 27 декабря 2018

Поскольку js чувствителен к регистру, попробуйте внести изменения следующим образом 

import Vue from "vue";
import VueRouter from "vue-router";
import Routes from "./Routes";
Vue.use(VueRouter);
export default new VueRouter({
  mode: 'history',
  routes: Routes
});
...