Vue Router切换侧边导航标签时出现<Anonymous Component>问题求助

1. 组件未定义name属性 #

Vue Devtools显示<Anonymous Component>的核心原因是你的General和Account组件没有声明name选项。Vue依赖组件的name属性在Devtools中标识组件，没有的话就会显示匿名。

解决：在两个组件的导出对象里添加name属性：

// General.vue
export default {
  name: 'General', // 新增这行
  // ...其他组件选项
}

// Account.vue
export default {
  name: 'Account', // 新增这行
  // ...其他组件选项
}

2. routes.js中组件导入方式错误 #

你用require导入组件时，直接取components[route.component]，但如果组件是用export default导出的，require返回的模块对象里需要取.default才能拿到组件本身，否则拿到的是模块容器，会导致路由加载的组件异常，也会加剧匿名显示的问题。

修改routes.js里的components定义：

const components = {
    General: require("./components/settings/General").default,
    Account: require("./components/settings/Account").default
}

或者换成更直观的ES6 import语法：

import General from "./components/settings/General";
import Account from "./components/settings/Account";

const components = { General, Account }

3. 冗余的组件注册 #

你在app.js里全局注册了General和Account组件，同时又在Settings组件里局部注册，而且路由已经单独导入了组件——这些重复注册完全没必要，还可能造成混淆。建议删除app.js里的以下代码：

import General from './components/settings/General';
Vue.component('General', General);
import Account from './components/settings/Account';
Vue.component('Account', Account);

完成以上修改后重新运行项目，Vue Devtools就能正确显示组件名称，路由切换功能也能正常工作。

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