2016-03-16 21 views
12

Tôi đang sử dụng Vue.js với vue-cli. Tôi đã chọn thiết lập webpack. Tôi đã kết nối tệp main.js để định tuyến, mặc dù tôi không thể tìm cách đăng ký thành phần của mình trên toàn cầu.Cách đăng ký thành phần toàn cầu với bộ định tuyến vue-

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> 

Khi tôi sử dụng phần Loader của tôi trong một số quan điểm, tôi nhận được cảnh báo sau đây.

[Cảnh báo cảnh báo]: Yếu tố tùy chỉnh không xác định: - bạn đã đăng ký thành phần chính xác chưa? Đối với các thành phần đệ quy, hãy đảm bảo cung cấp tùy chọn "tên".

Tôi đã cung cấp tên trong cấu phần và nó không tạo ra bất kỳ sự khác biệt nào. Tôi đang sử dụng bộ nạp-thành phần trong chế độ xem đăng nhập.
Tôi phát hiện ra rằng tôi nên xác định thành phần trong thành phần mà tôi sẽ sử dụng nó hoặc trên toàn cầu. Mặc dù, tôi không thể tìm ra cách xác định nó trên toàn cầu với định tuyến.

Trả lời

13

Cách bạn thiết lập nó ngay bây giờ, Thành phần bộ tải chỉ khả dụng cục bộ trong mẫu của thành phần Ứng dụng.

Routing không có ảnh hưởng về đăng ký thành phần toàn cầu, chỉ cần làm điều đó như không có một router:

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

hoặc đăng ký nó tại địa phương trong thành phần đăng nhập của bạn. Như bạn đã làm trong App.vue, bạn biết phải làm gì với Loader.vue

+1

Tôi không biết bạn có thể đăng ký nó mà không có trường hợp Vue gốc. Cảm ơn! – sniels

Các vấn đề liên quan