vue.js - 将组件导入Vue路由器不起作用

Question

我有一个 Vue 应用程序（v2.5），我正在将其转换为带有 vue 路由器的 SPA。我希望将路由的模板组织到单独的文件中，并将它们导入我的 index.js 以供路由器使用。问题是我收到一条错误消息：

[Vue warn]: Failed to mount component: template or render function not defined.

found in
---> <Anonymous>
       <Root> vue.common.js:593

当我在 index.js 文件中包含模板时，一切都很好。该应用程序是使用Browserify 构建的，这就是我导入 w/require 而不是 es6 导入的原因。文件：

// src/router/index.js
const Vue = require("vue");
const VueRouter = require("vue-router");
const home = require("../js/components/homeComponent");

    const routes = [
      {
        path: "/",
        name: "Home",
        component: home,
      },
    ];
    
    const router = new VueRouter({
      mode: "history",
      // eslint-disable-next-line no-undef
      base: process.env.BASE_URL,
      routes,
    });
    
    module.exports = router;


// src/components/homeComponent.js
const Vue = require("vue");

const Home = Vue.component("home", {
  template: `
    <div class="container">
      
      <h1 class="text-center inset-shadow">Scores From Around The Leagues</h1>
      <div id="sportsImages" class="title-images d-inline-flex justify-content-around fixed-top">
        <img src="./src/img/mlb-sm.jpg" alt="Pitcher Throwing Ball" />
        <img src="./src/img/nfl-sm.jpg" alt="David Tyree Superbowl Catch" />
        <img src="./src/img/nba-sm.jpg" alt="Michael Jordan Dunking" />
      </div>

      <hr class="my-2" />
            
    </div> <!-- End .container -->
   `,
});

module.exports = {
  Home
};

我在 index.js 中登录控制台并查看：

Object { Home: VueComponent(options)

提前感谢您的帮助。

标签： vue.jsvue-router