Vue 组件未在路由器视图中呈现答案

【问题标题】：Vue component not rendered inside router-viewVue 组件未在路由器视图中呈现
【发布时间】：2017-07-31 06:11:21
【问题描述】：

最近我一直在前端使用 vue 和 vue-router 来塑造一个 SPA。

我的问题是我无法访问主 Vue 实例中定义的组件：

import ElementComponent from './Element';

const app = new Vue({
   el: '#app',
   router,
   components: { Element: ElementComponent }
});

每当我在#app 范围内执行<element></element> 时，组件都会被渲染，但我不能在路由组件内使用该元素。

我的路线是这样定义的：

var routes = [
{ path: '/section/part', component: require('../views/Part') }];

然后提供给路由器实例：

 new VueRouter({routes});

每当我尝试在零件组件模板中调用<element></element> 时出现断点，我在 vuedevtools 中得到了这个：[Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。（位于 C:\Users\Doe\project\js\views\Part.vue）

【问题讨论】：

标签： scope components vue.js vue-router

【解决方案1】：

您需要将组件导入views/Part 组件。所以做你在主 Vue 实例中做的同样的事情，但只在部分组件中。

我相信如果你想让组件全球化，你需要使用

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

参考https://vuejs.org/v2/guide/components.html#Registration

【讨论】：

好的，我试一试
感谢提醒，确实是全局组件