为什么我的 vue-router 没有渲染我的文件？

Question

我尝试在我的 Vue 项目中使用 Vue-router。 我用

npm install vue-router@latest

安装了它。 我现在的问题是，它不起作用

我的 router.js 文件如下所示：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './src/components/Home.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home 
    },
  ],
});

然后我想将其导入到带有

<router-view></router-view>

标签的 App.vue 文件中，但这是整个文件：

<script setup>
import { RouterView } from 'vue-router';
</script>

<template>
    <router-view></router-view>
</template>

这也是文件结构的图片：

Home.vue 只是整个登陆页面，但是当我使用

npm run dev

运行服务器时，它只显示一个白色页面。有人知道这里的问题是什么吗？

Answer 1

vue-router

是否已添加到

main.js

中的Vue实例，如下所示？

import { createApp } from "vue"
import { router } from "../router" // based on where your router.js is placed

const app = createApp(App)

app.use(router)
app.mount("#app")

此外，您的文件夹结构不遵循约定。看起来真的很乱。