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

Posted 2023-02-23

【中文标题】Vue 组件未在路由器视图中呈现

【英文标题】：Vue component not rendered inside router-view

【发布时间】：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）

【参考方案1】：

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

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

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

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

【讨论】：

好的，我试一试

感谢提醒，确实是全局组件