Vue роутер не загружает компонент - PullRequest
Новая
       10

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

0 голосов
/ 01 мая 2018

Итак, я искал vue и столкнулся с проблемой, для которой не могу найти решение. Я использую Vue и Vue-роутер. Я начал с базового шаблона vue + webpack, который дал начальный шаблон.

Я успешно добавил дополнительные маршруты к предопределенным маршрутам, которые работают как положено (игры, турниры, статистика и маршруты пользователей работают просто отлично). Однако сейчас я не могу получить дополнительные маршруты для работы. «игровой» маршрут не работает, я также попытался добавить дополнительные маршруты, которые, похоже, тоже не работают.

Итак, это мой текущий файл маршрутизатора (index.js): 

import Vue from 'vue'
import Router from 'vue-router'
const Gaming = () => import('@/components/gaming.vue');
const Home = () => import('@/components/home.vue');
const Game = () => import('@/components/game.vue');
const Tournament = () => import('@/components/tournament.vue');
const Users = () => import('@/components/users.vue');
const Stats = () => import('@/components/stats.vue');


const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/games',
      name: 'Game',
      component: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      components: Gaming,
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      component: Tournament
    },
    {
      path: '/users',
      name: 'Users',
      component: Users
    },
    {
      path: '/stats',
      name: 'Stats',
      component: Stats
    }
  ]
});

export default router;

Vue.use(Router);

Все мои маршруты работают, как и ожидалось, кроме маршрута "Gaming". Компонент «Игры» выглядит следующим образом: 

<template>
  <div>
    <h1>WTF?!?!?!?!?=!?!</h1>
  </div>
</template>

<script>
  export default {
    name: 'Gaming',
    components: {},
    data() {
      return {}
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

Я пытался в значительной степени скопировать / вставить работающий компонент, и изменить только имя, а также шаблон. Но, похоже, есть проблемы. Первоначально я сделал, чтобы компонент маршрута импортировал обычный «шаблонный» путь 

import Stats from '@/components/Stats'

Который в значительной степени имел тот же результат, за исключением того, что это вызвало бы исключение при попытке перейти к «игровому» маршруту. 

Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-c9036282","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/gaming.vue (app.js:4240), <anonymous>:3:16)

Все остальные маршруты работали. Я также попытался воссоздать все файлы и заново выполнить определенный маршрут, который, похоже, тоже не работает. Так что я в растерянности, что я могу сделать, чтобы исправить эту проблему?

Здесь я пытаюсь проверить маршрут, и, как вы можете видеть, в компоненте отсутствует «все» Проверка маршрута

Также пробовал искать с помощью vue addon for chrome, где компонент не загружается в представление

Расширение Vue Chrome

Загрузил проект в gdrive, если кто-то хочет его настроить Ссылка на Google Drive

1 Ответ

0 голосов
/ 01 мая 2018

Найдена проблема: 

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/games',
      name: 'Game',
      component: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      components <----------: Gaming,
      // Should be component not componentS
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      component: Tournament
    },
    ...

Кроме того, вы должны использовать стандартный метод импорта. Без этой ошибки я бы никогда не нашел проблему.

...