当 vue 中的路由发生变化时组件不显示（Vue3，Vue-router）

Question

我是 Vue(v.3) 和 vue-router 的新手，在与大家分享问题之前，我在 Stack Overflow 和 google 中进行了搜索，但问题仍未解决。

我定义了两条路线：

1. /登录
2. /管理员/索引

问题：

登录路线工作正常。 但是当我尝试进入管理路径时，它会显示登录表单而不是管理面板。

注意：我在components/layouts/MasterComponent.vue和App.vue中声明<router-view></router-view> ，我只是导入了登录组件。

这是我的代码：

路线：

import { createRouter, createWebHistory } from 'vue-router'
import LoginComponent from "../components/auth/LoginComponent";
import MasterComponent from "../components/layouts/MasterComponent";
import ProjectComponent from "../components/ProjectsComponent.vue";
const routes = [{
        name: "Login",
        path: "/login",
        component: LoginComponent,
    },

    // admin routes
    {
        name: "Index",
        path: "/admin/index",
        component: MasterComponent,
        children: [{
            path: '/admin/projects',
            name: 'Projects',
            component: ProjectComponent,
        }]
    },
];
const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

主组件代码：

    <template>
    <div class="app">
        <HeaderComponent />
        <LeftMenu />
        <div class="main-content">
          <section class="section">
            <div class="section-body">
              <!-- add content here -->
              <router-view></router-view>
            </div>
          </section>
          <SiteSetting/>
        </div>
        <FooterComponent />
    </div>
    </template>
    
    <script>
    import HeaderComponent from "./HeaderComponent.vue";
    import LeftMenu from "./LeftMenu.vue";
    import FooterComponent from "./FooterComponent.vue";
    import SiteSetting from "./SiteSetting.vue";
    export default {
      name: "MasterComponent",
      components: {
        HeaderComponent,
        LeftMenu,
        FooterComponent,
        SiteSetting
    },
    };
    </script>

应用程序.vue 代码

<template>
  <LoginComponent/>
</template>

<script>
import LoginComponent from './components/auth/LoginComponent.vue'

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

<style>
</style>

main.js 代码

import { createApp } from 'vue'
import App from './App.vue'
import routes from "./routes/route";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css"

const app = createApp(App)
app.use(routes)
app.mount('#app')

Answer 1

问题解决了

我只是忘了把<router-view></router-view>放在App.vue里面。 并像这样更改路线：

// admin routes
    {
        name: "Index",
        path: "/admin",
        component: MasterComponent,
        redirect: '/dashboard',
        children: [{
            path: '/dashboard',
            name: 'Dashboard',
            component: DashboardComponent,
        }]
    },

更改前App.vue ：

<template>
  <LoginComponent/>
</template>

<script>
import LoginComponent from './components/auth/LoginComponent.vue'

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

<style>
</style>

更改后App.vue ：

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

<script>

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

<style>
</style>