Vue.js外部路由引入单文件组件提示未知自定义元素错误求助

嘿，这个问题我太熟了！你遇到的<profile>和<user-info>未识别的错误，核心原因是自定义组件没有被正确注册——不管是单文件组件（.vue）还是普通组件，Vue都需要明确知道这些组件的存在才能正常渲染它们。

为什么之前没问题？ #

你之前没用单文件组件时，大概率是通过全局方式注册了这些组件（比如直接在页面里用Vue.component()定义），所以路由里的内联模板能直接调用。但切换到单文件组件后，组件的作用域更清晰独立，没经过注册的话Vue自然找不到它们。

两种解决办法，任选其一就行： #

1. 全局注册组件（推荐在组件复用率高时使用）

在你的app.js（或者项目入口文件，比如main.js）里，先导入这两个单文件组件，再全局注册：

// 先导入你的组件，注意路径要和实际文件位置匹配
import Profile from './components/Profile.vue'
import UserInfo from './components/UserInfo.vue'

// 全局注册后，所有组件（包括路由内联组件）都能直接使用
Vue.component('profile', Profile)
Vue.component('user-info', UserInfo)

// 再初始化路由
import routes from './routes/routes';
const router = new VueRouter({ routes });

2. 在路由组件内局部注册（适合组件仅在当前路由使用的场景）

直接修改你的routes.js，把需要的组件导入后，在路由的内联组件里局部注册：

// 导入组件，路径根据你的项目结构调整
import Profile from '../components/Profile.vue'
import UserInfo from '../components/UserInfo.vue'

export default [{
  path: '/welcome',
  component: {
    // 局部注册当前组件需要用到的自定义组件
    components: {
      'profile': Profile,
      'user-info': UserInfo
    },
    // 注意：你原来的模板里<user-info>标签闭合错误，要改成</user-info>
    template: `<div> <profile></profile> <user-info></user-info> </div> `
  }
}]

额外小提醒 #

检查一下你的模板代码：原来的<user-info>标签没有正确闭合，写成了<user-info>，这会导致Vue解析出错，记得改成</user-info>哦！

内容的提问来源于stack exchange，提问作者LeBlaireau