我在vue-cli中使用Vue.js。我选择了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警告]:未知的自定义元素: - 您是否正确注册了组件?对于递归组件,请务必提供&#34; name&#34;选项。
我在组件中提供了名称,但没有任何区别。我在登录视图中使用了loader-component 我发现我应该在组件中定义我要使用它或全局的组件。但是,我无法找到如何使用路由全局定义它。
答案 0 :(得分:21)
现在设置它的方式,加载程序组件仅在App组件的模板中本地可用。
路由对全局组件注册没有影响,就像没有路由器一样:
// main.js, before all the router stuff:
import Loader from './components/Loader'
Vue.component('loader', Loader)
或在您的登录组件中本地注册它。正如您在App.vue中所做的那样,您知道如何处理Loader.vue