使用Vue Router实现多路由视图的方案咨询

要实现你描述的布局结构，核心是使用Vue Router的嵌套路由功能，让Management.vue作为父路由组件，承载Products.vue和Suppliers.vue的渲染容器。以下是具体实现步骤：

1. 修正组件导入路径 #

首先确保导入正确的组件，注意Products.vue和Suppliers.vue位于management_pages文件夹下，同时补充Management.vue和Register.vue的导入：

import { createRouter, createWebHistory } from "vue-router";
// 修正子组件路径
import Products from "../management_pages/Products.vue";
import Suppliers from "../management_pages/Suppliers.vue";
import ErrorPage from "../pages/ErrorPage.vue";
import Login from "../pages/Login.vue";
import Management from "../pages/Management.vue"; // 导入父组件
import Register from "../pages/Register.vue"; // 导入注册页

2. 配置嵌套路由结构 #

调整路由规则，将/management设为父路由，其内部的子路由由Management.vue中的router-view渲染：

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/login",
            name: "Login",
            component: Login,
        },
        {
            path: "/register",
            name: "Register",
            component: Register,
        },
        {
            // 父路由：由App.vue的router-view渲染
            path: "/management",
            name: "Management",
            component: Management,
            // 子路由：由Management.vue的router-view渲染
            children: [
                {
                    // 完整路径：/management/products
                    path: "products",
                    name: "Products",
                    component: Products,
                },
                {
                    // 完整路径：/management/suppliers
                    path: "suppliers",
                    name: "Suppliers",
                    component: Suppliers,
                },
                // 可选：访问/management时默认渲染Products
                {
                    path: "",
                    redirect: "products"
                }
            ]
        },
        {
            path: "/:pathMatch(.*)*",
            name: "ErrorPage",
            component: ErrorPage,
        },
    ],
});

export default router;

3. 确保Management.vue中包含子路由容器 #

在Management.vue的模板里添加<router-view>标签，用于渲染Products.vue和Suppliers.vue：

<template>
  <!-- 这里是Management的布局内容，比如侧边栏、顶部导航等 -->
  <div class="management-layout">
    <aside>管理侧边栏</aside>
    <main>
      <!-- 子路由组件将渲染在这里 -->
      <router-view></router-view>
    </main>
  </div>
</template>

关键说明 #

• App.vue的router-view只会渲染Login.vue、Register.vue和Management.vue三个顶级路由组件
• 当访问/management/products或/management/suppliers时，Management.vue先被渲染到App.vue的router-view中，其子组件再渲染到Management.vue的router-view里
• 若希望访问/management时自动显示某个子页面，可添加默认重定向规则（如上述代码中的redirect: "products"）

内容的提问来源于stack exchange，提问作者Mishen Thakshana