Vue.js - неизвестный пользовательский элемент: <router-view> - PullRequest
Новая
       14

Vue.js - неизвестный пользовательский элемент: <router-view>

0 голосов
/ 20 марта 2019

Я немного новичок в Vue.js и пытаюсь реализовать маршрутизацию к приложению, но по какой-то причине я сталкиваюсь с проблемой, говорящей:

Неизвестный пользовательский элемент: <router-view> - правильно ли вы зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name»

Неправильно ли я регистрирую компонент?Любая помощь очень ценится, мой код ниже:

app.js 

import Vue from 'vue'
import AppLayout from './theme/Layout.vue'
import router from './router'

const app = new Vue({
  router,
  ...AppLayout
})

export { app, router }

router.js 

import Vue from 'Vue'
import VueRouter from 'vue-router'
import Category from './theme/Category.vue'
import Login from './theme/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {path: '/', component: Category},
    {path: '/login', component: Login}
  ]
})

экспорт по умолчанию маршрутизатор

макет.vue 

 <template>
  <div>
    <app-header></app-header>
    <section class='main-section section'>
      <div class='container content'>
        <router-view></router-view>
      </div>
    </section>
    <app-footer></app-footer>
  </div>
</template>
<script>
import AppHeader from './AppHeader.vue'
import AppFooter from './AppFooter.vue'
export default {
  components: {
    'app-header': AppHeader,
    'app-footer': AppFooter
  }
}
</script>
<style lang='scss'>
$primary: #287ab1;
@import '~bulma';

</style>

Я слежу за кодом этого парня Здесь и его курс

1 Ответ

0 голосов
/ 20 марта 2019

Похоже, Vue.use(VueRouter) не делает ничего ...

Что из-за чувствительности к регистру при импорте Vue 

import Vue from 'Vue'  // <--- should be 'vue' NOT 'Vue'
import VueRouter from 'vue-router'
import Category from './theme/Category.vue'
import Login from './theme/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {path: '/', component: Category},
    {path: '/login', component: Login}
  ]
})
...