How to fix ionic/angular routes to different pages?

I’ve been working on an ionic app and I have a split panel lane that has links to many different pages in the dashboard. after login page its dashboard/home and theres also dashboard/messages and so forth and so on. In the url tag I can navigate to each page but when I click on a link in the split panel lane it goes back to the current page whether it is dashboard/messages or dashboard/home. In my code, the links are linked to differents routes for the app navigation but on serve, all links link to the current route. So if I am in the home page, an a tag that is routed to a messages route in the code load back to the home page even though in the code I never told it to do so.


  <ion-menu contentId="content" menuId="main">
 <div class="header" [routerLink]="">
 <div class="img">
   <img src=""/>
 <div class="name">
   <p>Georges Tchianga</p>
 <div class="arrow">
  <ion-icon name="arrow-forward"></ion-icon>
     <ion-menu-toggle auto-hide="false">
       <div class="menu_nav">
           <li><a [routerLink]='home'>Home</a></li>
           <li><a [routerLink]='messages'>Messages</a></li>
            <li><a [routerLink]='Payments'>Payments</a></li>
             <li><a [routerLink]='posted'>Posted Jobs</a></li>
  <ion-router-outlet id="content" main>


    <ion-searchbar ></ion-searchbar>

<ion-content padding>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button color="light">
        <ion-icon name="add"></ion-icon>

##app routing module

 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 import { DashboardPage } from './dashboard/';
 import {HomePage } from './dashboardComponents/home/'
import {MessagesPage } from './dashboardComponents/messages/'
import {PaymentsPage } from './dashboardComponents/payments/'
 import {PostedJPage } from './dashboardComponents/posted-j/'
 import {ProfileEditPage } from './dashboardComponents/profile-edit/'
 import {PostPage } from './dashboardComponents/post/'
const routes: Routes = [
 { path: '', redirectTo: 'login', pathMatch: 'full' },
 { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
 { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
 { path:'dashboard', redirectTo:'dashboard/home', pathMatch: 'full' },
 { path:'dashboard', component: DashboardPage,
  children: [
  { path: 'messages', component:MessagesPage , pathMatch:'full'},
 { path: 'home', component: HomePage , pathMatch:'full'},
 { path: 'payments', component:PaymentsPage , pathMatch:'full'},
{ path: 'posted', component:PostedJPage , pathMatch:'full'},
  { path: 'post', component:PostPage , pathMatch:'full'}
  { path: 'post', loadChildren: './dashboardComponents/post/post.module#PostPageModule' }
  ]  ;

    imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
   exports: [RouterModule]
  export class AppRoutingModule { }
  export const components = [

Just like the home page, I have many other pages. as you can see above, In the dashboard split panel, I have links that goes to different routes but when I run the run, they all change and links to the current page that I am in. Weirdess thing I’ve seen lately