为啥我写的左侧导航栏跳转不了页面啊

首先给你们看看我写的 1.app.vue页面

.el-menu{ height:100%; border:none; }

2.这是Role.vue界面 3.其它几个页面也是一样的内容 4.这是router配置 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; import User from "@/views/User.vue"; import Role from "@/views/Role.vue"; import Rule from "@/views/Rule.vue"; import Client from "@/views/Client.vue"; import Hhome from "@/views/Hhome.vue"; const routes = [ { path: "/home", name: "home", component:Hhome , children: [ //用户管理 { path: "/user", name: "account", component:User, }, { //角色管理 path: "/role", name: "role", component:Role, }, //规则管理 { path: "/rule", name: "rule", component:Rule, }, { //客户端管理 path: "/client", name: "client", component:Client, }, ] }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, });

export default router; 运行结果没达到点击左侧导航栏右侧展示页面内容。