组件没有显示何时在VUE中变化（VUE3，VUE-ROUTER）

Question

我是Vue（v.3）和Vue-Router的新手， 我与大家分享问题，我在堆栈溢出和Google中搜索了它，但是问题仍然尚未解决。

我定义了两条路由：

1. /login
2. /admin/index

问题：

登录路线正常工作。但 当我尝试转到管理员路由时，它会显示登录表格而不是管理面板。

注意：我声明＆lt; router-view＆gt;＆lt;＆lt;/router-view＆gt; ins coce>组件/layouts/mastercomponent.vue，以及内部<代码> app.vue ，我只是导入登录组件。

这是我的代码：

路由：

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>

app.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

问题解决了

我只是忘了放置＆lt; router-view＆gt;＆lt;/router-view＆gt; in 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>