Vue <router-view />没有显示任何内容

Question

因此，我使用

MyServer.com/vue/

等子目录在我的服务器中部署此应用程序。

在我的App.vue中只显示

<router-view />

，在本地这个应用程序运行顺利，并且在控制台上没有错误。

应用程序.vue：

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

<script>
export default { };
</script>

<style></style>

route.js：

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue"),
    redirect: "/dashboard",
    children: [
      // Children routes
    ],
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  mode: 'hash',
});

export default router;

main.js：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./route";
import ElementPlus from "element-plus";
import { Chart, registerables } from "chart.js";
import "element-plus/dist/index.css";
import "./styles/index.scss";

const app = createApp(App);

app.use(router);
app.use(ElementPlus);
app.use(Chart.register(...registerables));

app.mount("#app");

Answer 1

我认为您缺少可以注入路由器视图组件的“#app”。在 App.vue 中，你可以尝试添加一个带有该 id #app 的 div 吗？

<template>
 <div id="app">
  <router-view/>
 </div>
</template>