2016-03-16 34 views
12

Vue.js ile vue-cli kullanıyorum. Webpack kurulumu için seçtim. Yönlendirmelerim için main.js dosyasını bağladım, ancak bileşenlerimi global olarak kaydettirmenin bir yolunu bulamıyorum.Genel bileşenler vue yönlendiriciyle nasıl kaydedilir

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') 

<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> 

Bazı görünümde benim Yükleyici bileşenini kullanmak App.vue

, ben aşağıdaki uyarıyı olsun.

[Vue uyarmak]: Bilinmeyen özel öğe: - doğru bileşeni kaydedildi? Yinelemeli bileşenler için, "isim" seçeneğini sağladığınızdan emin olun.

Bileşene adı verdim ve herhangi bir değişiklik yapmadı. Yükleyici bileşenini giriş görünümünde kullanıyorum.
Bileşeni, onu kullanacağım veya global olarak kullanacağım bileşende tanımlamam gerektiğini öğrendim. Yine de, küresel olarak yönlendirme ile nasıl tanımlanacağını bulamıyorum.

cevap

13

Şimdi ayarladığınız yol, Yükleyici bileşeni yalnızca App bileşeninin şablonunda kullanılabilir.

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

veya Giriş bileşeninde yerel olarak kayıt:

Yönlendirme küresel bileşen kayıt üzerinde hiçbir etkisi yoktur, sadece bir yönlendirici olmadan gibi yapacağız. App.vue uygulamasında yaptığınız gibi, Loader.vue

+1

ile ne yapacağınızı biliyorsunuz Kök Vue örneğiyle kaydettirebileceğinizi bilmiyordum. Teşekkürler! – sniels