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

Question

最近我一直在前端使用 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});

每当我尝试在 Part 组件模板中调用 <element></element> 时都会出现断点我在 vuedevtools 中得到了这个：[Vue warn]: Unknown custom element: - 你是否正确注册了组件？对于递归组件，请确保提供 "name" 选项。（在 C:\Users\Doe\project\js\views\Part.vue 中找到）

Answer 1

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

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

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

引用https://vuejs.org/v2/guide/components.html#Registration

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

Vue component not rendered inside router-view

components

scope

vue.js

vue-router