Ошибка маршрутизатора Vue Router

Question

У меня возникает следующая ошибка при попытке реализовать vue-router.

Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Где мне нужно предоставить возможность имени?

Многие обучающие программы, на которые я смотрю, выглядят как старая версия vue-router. Я следую процессу настройки, но не могу заставить его работать.

Может быть что-то особенное мне нужно сделать, если вы используете шаблон webpack cli?

Я также использую vue-router cdn.

Вот мой main.js

import Vue from 'vue' 
import App from './App' 
import ResourceInfo from '../src/components/ResourceInfo' 
var db = firebase.database(); 
var auth = firebase.auth(); 

const routes = [ 
    { path: '/', component: App }, 
    { path: '/info', component: ResourceInfo } 
] 

const router = new VueRouter({ 
    routes 
}) 

/* eslint-disable no-new */ 
var vm = new Vue({ 
    el: '#app', 
    components: { App }, 
    created: function() { 
    firebase.auth().onAuthStateChanged(function(user) { 
     if (user) { 
      // Get info for currently signed in user. 
      console.log(user); 
      vm.currentUser = user; 
      console.log(vm.currentUser); 
     } else { 
      // No user is signed in. 
     } 
    }) 
    // Import firebase data 
    var quizzesRef = db.ref('quizzes'); 
    quizzesRef.on('value', function(snapshot) { 
     vm.quizzes = snapshot.val(); 
     console.log(vm.quizzes); 
    }) 

    var resourcesRef = db.ref('resources'); 
    resourcesRef.on('value', function(snapshot) { 
     vm.resources.push(snapshot.val()); 
     console.log(vm.resources); 
    }) 

    var usersRef = db.ref('users'); 
    usersRef.on('value', function(snapshot) { 
     vm.users = snapshot.val(); 
     console.log(vm.users); 
    }) 
    }, 
    firebase: { 
    quizzes: { 
     source: db.ref('quizzes'), 
     asObject: true 
    }, 
    users: { 
     source: db.ref('users'), 
     asObject: true 
    }, 
    resources: db.ref('resources') 
    }, 
    data: function() { 
    return { 
     users: {}, 
     currentUser: {}, 
     quizzes: {}, 
     resources: [] 
    } 
    }, 
    router, 
    render: h => h(App) 
}) 

И мой App.vue

<template> 
    <div id="app"> 
    <navbar></navbar> 
    <resource-info :current-user="currentUser"></resource-info> 
    <router-view></router-view> 
    </div> 
</template> 

<script> 
import Navbar from './components/Navbar' 
import ResourceInfo from './components/ResourceInfo' 

export default { 
    name: 'app', 
    props: ['current-user'], 
    components: { 
    Navbar, 
    ResourceInfo 
    } 
} 
</script> 

<style> 
</style> 

Answer 1

В вашем main.js файла, вам нужно импортировать VueRouter следующим образом:

import Vue from "vue"    // you are doing this already 
import VueRouter from "vue-router" // this needs to be done 

И ниже что вам необходимо инициализировать модуль маршрутизатора следующим образом:

// Initialize router module 
Vue.use(VueRouter) 

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

Пожалуйста, обратитесь к странице установки в документации, под НПЙ раздел: http://router.vuejs.org/en/installation.html

Answer 2

Сначала установить VUE маршрутизатор с помощью «НОЙ установки VUE-маршрута» и следовать сильфону в main.js

import Vue from 'vue' 
import Router from 'vue-router' 
import App from './App' 
import ResourceInfo from '../src/components/ResourceInfo' 
var db = firebase.database(); 
var auth = firebase.auth(); 

Vue.use(Router) 
var router = new Router({ 
    hashbang: false, 
    history: true, 
    linkActiveClass: 'active', 
    mode: 'html5' 
}) 

router.map({ 
    '/': { 
    name: 'app', 
    component: App 
    }, 
    '/info': { 
    name: 'resourceInfo', 
    component: ResourceInfo 
    } 
}) 
// If no route is matched redirect home 
router.redirect({ 
    '*': '/' 
}); 

// Start up our app 
router.start(App, '#app') 

Это может решить вашу проблему.