Vue Router 导入不能与 require 一起工作

Question

我正在建立一个全新的 Vue 2 项目。由于与我需要使用的库之一的兼容性问题，我还不能迁移到 Vue 3。

我现在有一个非常基本的设置，文件夹结构是这样的：

/
App.vue
main.js
router.js

/pages
AboutUs.vue
Home.vue

如果我不使用 Vue Router，只是将 AboutUs 页面导入 App.vue 并在模板中调用它的标签，它会按预期显示。

当我改为使用 Vue 路由器在 App.vue 的 <router-view /> 标记中呈现它时，我收到错误消息：

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

我怀疑这意味着我在路由器中做错了什么，但我看不到什么。

main.js

import Vue from 'vue'
import App from './App.vue'

import router from 'router.js'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/About">About</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const About = require('../pages/AboutUs')
const Home = require('../pages/Home')

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '*',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  linkExactActiveClass: '',
  routes
})

export default router

About.vue

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
    
}
</script>

Answer 1

es6 导入

尝试使用 es6 导入而不是 require:

import About from '../pages/AboutUs'
import Home from '../pages/Home'

然后您的路由语法将按原样工作。这是因为当您使用 require 时，您得到的是整个模块，而不是模块的 Component 导出。

-或-

`require`

或者，如果您想继续使用 require，您需要使用以下语法，使用模块的 default 属性：

const About = require('../pages/AboutUs')
const Home = require('../pages/Home')

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About.default
  },
  {
    path: '*',
    name: 'Home',
    component: Home.default
  }
]

Vue Router 导入不能与 require 一起工作

Vue Router import not working with require

vue.js

vue-router

es6-modules

vuejs2

vue-cli

es6 导入

`require`