2016-03-16 15 views
12

Używam Vue.js z vue-cli. Wybrałem konfigurację WebPacka. Podłączyłem plik main.js do routingu, chociaż nie mogę znaleźć sposobu na globalne zarejestrowanie moich komponentów.Jak zarejestrować komponenty globalne za pomocą vue-routera

main.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import App from './App' 
import Companies from './components/pages/Companies' 
import Income from './components/pages/Income' 
import Login from './components/pages/Login' 

Vue.use(VueRouter) 

let router = new VueRouter() 

router.map({ 
    '/companies': { 
    component: Companies 
    }, 
    '/income': { 
    component: Income 
    }, 
    'login': { 
    component: Login 
    } 
}) 

router.start(App, 'body') 

App.vue

<template> 
    <div> 
    <router-view></router-view> 
    </div> 
</template> 
<script> 
import {Auth} from './lib/api' 
import Loader from './components/Loader' 

export default { 
    components: { 
    Loader 
    }, 
    ready() { 
    Auth.isLoggedIn().then(
     (response) => { 
     if (response.data === false) { 
      this.$router.go('/login') 
     } else { 
      this.$router.go('/companies') 
     } 
     }, 
     (response) => { 
     this.$router.go('/login') 
     } 
    ) 
    } 
} 
</script> 

Kiedy używam komponentu Loader w jakimś zdaniem, pojawia się następujące ostrzeżenie.

[Vue warn]: Nieznany element niestandardowy: - czy prawidłowo zarejestrowałeś komponent? W przypadku komponentów rekurencyjnych należy podać opcję "nazwa".

Podałem nazwę w komponencie i nie miało to żadnego znaczenia. Używam modułu ładującego w widoku logowania.
Dowiedziałem się, że powinienem zdefiniować komponent w komponencie, który zamierzam użyć lub na całym świecie. Nie mogę jednak dowiedzieć się, jak zdefiniować go globalnie za pomocą routingu.

Odpowiedz

13

Sposób, w jaki teraz go skonfigurowano, Komponent ładujący jest dostępny lokalnie tylko w szablonie komponentu aplikacji.

Routing nie ma wpływu na rejestrację komponentu globalnej, zrób to jak bez routera:

// main.js, before all the router stuff: 
import Loader from './components/Loader' 
Vue.component('loader', Loader) 

lub zarejestrować je lokalnie w swoim składniku logowania. Jak już to zrobiłeś w App.vue, wiesz co zrobić z Loader.vue

+1

Nie wiedziałem, że możesz zarejestrować to bez głównej instancji Vue. Dzięki! – sniels

Powiązane problemy