2016-03-16 5 views
12

私はvue-jiをvue-cliとともに使用しています。私はウェブパックの設定を選択しました。 main.jsファイルをルーティング用に配線しましたが、コンポーネントをグローバルに登録する方法は見つかりませんでした。グローバルコンポーネントをvue-routerに登録するには

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> 

私はいくつかのビューで私のLoaderコンポーネントを使用すると、私は次の警告を取得します。

[Vue警告]:不明なカスタム要素: - コンポーネントを正しく登録しましたか?再帰的なコンポーネントの場合、 "name"オプションを指定してください。

コンポーネントに名前を指定しても差異はありませんでした。私はログインビューでloader-componentを使用しています。
コンポーネントでコンポーネントを定義するか、グローバルに使用するかを決めなければなりません。しかし、ルーティングでグローバルに定義する方法を見つけることはできません。

答えて

13

あなたが今設定した方法です。ローダーコンポーネントは、Appコンポーネントのテンプレートでローカルにしか使用できません。

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

をしたり、ログインコンポーネントでローカルに登録:

ルーティングがグローバルコンポーネント登録に影響を与えない、ちょうどルーターなしで同じようにそれを行います。 App.vueで既に行ったように、あなたはLoader.vueをどうするかを知っています

+1

root Vueインスタンスなしで登録できるかどうかはわかりませんでした。ありがとう! – sniels

関連する問題