Vue路由器导入不适用于require答案

【问题标题】：Vue Router import not working with requireVue路由器导入不适用于require
【发布时间】：2021-05-04 18:34:34
【问题描述】：

我正在建立一个全新的 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 警告]：挂载组件失败：未定义模板或渲染函数。

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

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

关于.vue

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

<script>
export default {
    
}
</script>

【问题讨论】：

从官方文档看来，正确的形式是 <router-view></router-view> 又名 router-view 不是自闭合标签。 router.vuejs.org/api/#router-view
@kissu 文档以这种方式显示，但任何组件都可以在 Vue CLI 中自行关闭。事实上，这样做是strongly recommended。（这不是在 DOM 模板的情况下）

标签： vue.js vuejs2 vue-router es6-modules vue-cli

【解决方案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
  }
]

【讨论】：