如何使用 vue-router 注册全局组件

Posted 2023-02-22

【中文标题】如何使用 vue-router 注册全局组件

【英文标题】：How to register global components with vue-router

【发布时间】：2016-07-01 19:20:18

【问题描述】：

我将 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 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我在组件中提供了名称，但没有任何区别。我在登录视图中使用加载器组件。 我发现我应该在要使用的组件中定义组件或全局定义组件。不过，我不知道如何使用路由全局定义它。

【参考方案1】：

你现在设置的方式，加载器组件只在App组件的模板中本地可用。

路由对全局组件注册没有影响，就像没有路由一样：

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

或在您的登录组件中本地注册它。正如您已经在 App.vue 中所做的那样，您知道如何使用 Loader.vue

【讨论】：

我不知道你可以在没有根 Vue 实例的情况下注册它。谢谢！