in the project, you need to do a navigation bar on the left and display the interface of the component content on the right. It is required to enter the index interface after landing. The index interface is divided into two parts: the left side is the navigation bar and the right side is the content display (showing the contents of dashboard, user and order).
:
index interface code:
< div class= "container" >
< div class= "row" >
<div class="col-lg-2 my-3">
<div class="nav d-flex flex-lg-column flex-row">
<a class="nav-link active p-1" routerLink="/manage/dashboard" routerLinkActive="/manage/dashboard">
<i class="fe fe-grid mx-1"></i>
<span class="mt-1"></span>
</a>
<a class="nav-link p-1" routerLink="/manage/user">
<i class="fe fe-user mx-1"></i>
<span class="mt-1"></span>
</a>
<a class="nav-link p-1" routerLink="/manage/order">
<i class="fa fa-shopping-cart mr-1"></i>
<span class="mt-1"></span>
</a>
</div>
</div>
<div class="col my-3">
<div class="d-flex justify-content-between">
<h2 class="display-4 title-2 text-center mb-6">
<span></span>: 1
<span>YUAN</span>
</h2>
<p class="small">
</div>
<router-outlet></router-outlet>
</div> < / div >
< / div >
my own routing configuration (incorrect, please point out):
app-routing:
const routes: Routes = [
{path: "login", component: LoginComponent},
{path:" index", component: IndexComponent},
{path:", component: IndexComponent, pathMatch: "full", canActivate: [AuthGuardService]},
{path:" * *", redirectTo:"/ index"}
];
core-routing:
const routes: Routes = [
{path: "index", component: IndexComponent}
];
manage-routing:
const routes: Routes = [
{
path: "manage",
children: [
{path: "dashboard", component: DashboardComponent},
{path: "user", component: ManageUserComponent},
{path: "order", component: ManageOrderComponent},
{path: "", redirectTo: "/dashboard", pathMatch: "prefix"}
]},
{path:"", redirectTo:"/ manage", pathMatch: "prefix"}];