web-dev-qa-db-ja.com

グローバルコンポーネントをvue-routerに登録する方法

Vue.jsとvue-cliを使用しています。ウェブパックのセットアップを選択しました。 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>

ビューでローダーコンポーネントを使用すると、次の警告が表示されます。

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

コンポーネントで名前を指定しましたが、違いはありませんでした。ログインビューでloader-componentを使用しています。
使用するコンポーネントにコンポーネントを定義するか、グローバルに定義する必要があることがわかりました。ただし、ルーティングでグローバルに定義する方法はわかりません。

javascriptvue.jsvue-router
18
Swimburger

現在の設定方法では、ローダーコンポーネントはアプリコンポーネントのテンプレートでローカルでのみ使用できます。

ルーティングは、グローバルコンポーネントの登録に影響を与えません。ルーターを使用しない場合と同様に行います。

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

または、ログインコンポーネントでローカルに登録します。 App.vueで既に行ったように、Loader.vueをどうするかを知っています。

21
Linus Borg