Vuejs - 外部路由文件答案

【问题标题】：Vuejs - external routes fileVuejs - 外部路由文件
【发布时间】：2018-05-11 13:23:29
【问题描述】：

我有一个 routes.js 文件

export default [{
      path: '/welcome',
      component: {
        template: `<div>
              <profile></profile>
              <user-info><user-info>
            </div>
                `
      }
    },

在我的 app.js 中

我导入路由并尝试将它们添加到路由器

import routes from './routes/routes';

const router = new VueRouter({
  routes
});

但是我得到了错误

app.js:1713 [Vue warn]: Unknown custom element: <profile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我确信以前使用过这种技术，但可能没有使用单个文件组件。这是导致问题的 .vue 文件。

【问题讨论】：

标签： vuejs2 vue-component vue-router

【解决方案1】：

您需要注册这两个组件。鉴于您的示例，您有三个选择：

1) 全球注册：

import Profile from './Profile'
Vue.component('profile', Profile)

import UserInfo from './UserInfo'
Vue.component('user-info', UserInfo)

// routes import
// vue init

2) 本地注册

import Profile from './Profile'
import UserInfo from './UserInfo'

new Vue({
  el: '#app',
  components: { Profile, UserInfo }

})

3) 直接在路由中注册：

export default [{
    path: '/welcome',
    component: {
        template: `<div>
            <profile></profile>
            <user-info><user-info>
          </div>`,
          components: { Profile, UserInfo }
        },
    }
 }]);

【讨论】：