在vue router中component 使用模板字符串会显示undefined

在Vue Router中，如果直接使用模板字符串作为component的值，可能会遇到一些问题。通常情况下，我们会通过组件的注册来映射路由和组件，而不是直接使用字符串。如果你在使用动态组件时遇到显示为`undefined`的情况，可能是因为几个原因：

1. 组件未正确注册：确保你的组件在Vue实例创建之前已经被正确地注册了。组件可以通过局部注册或全局注册的方式加入到Vue实例中。

2. 引用路径错误：如果组件是通过import的方式引入的，需要确保引用路径的正确性，包括文件名和目录结构。

3. 异步组件加载问题：如果组件是通过异步的方式加载的，需要确保使用了正确的组件加载函数，如`webpackChunkName`，并等待组件加载完成。

下面是一个简单的例子来说明如何在Vue Router中正确地注册并使用动态组件：

// 定义组件
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

// 创建Vue实例
new Vue({
  router,
  template: `
    <div id="app">
      <router-view></router-view>
    </div>
  `
}).$mount('#app');

如果你确实需要使用模板字符串来动态决定组件，你需要确保字符串值是有效的组件引用。这通常涉及到将字符串转换为组件引用的过程，可能需要使用一些辅助函数来完成。