如何使用vue-router注冊全局組件

Question

我正在使用Vue.js和vue-cli。 我選擇了webpack設置。 我連接了main.js文件進行路由，但我找不到全局注冊組件的方法。

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警告]：未知的自定義元素： - 您是否正確注冊了組件？ 對於遞歸組件，請確保提供“名稱”選項。

我在組件中提供了名稱，但沒有任何區別。 我在登錄視圖中使用了loader-component。
我發現我應該在組件中定義我要使用它或全局的組件。 雖然，我無法找到如何使用路由全局定義它。

Answer 1

現在設置它的方式，加載程序組件僅在App組件的模板中本地可用。

路由對全局組件注冊沒有影響，就像沒有路由器那樣：

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

或在您的登錄組件中本地注冊它。 正如您在App.vue中所做的那樣，您知道如何處理Loader.vue