Question

我有一个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文件。

Answer 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 }
        },
    }
 }]);

Vuejs - 外部路线文件

1 个答案: