當 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>