add new router links

fix_layout
roberts 2023-04-23 22:47:48 +02:00
parent aaeb7b1006
commit 5ccc380c1c
2 changed files with 35 additions and 10 deletions

View File

@ -8,13 +8,14 @@ import HelloWorld from './components/HelloWorld.vue'
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper"> <div class="wrapper">
<HelloWorld msg="You did it!" />
<nav> <nav>
<RouterLink to="/">Home</RouterLink> <RouterLink to="/">Home</RouterLink>
<RouterLink to="/push">Push</RouterLink> <RouterLink to="/chest">Chest</RouterLink>
<RouterLink to="/pull">Pull</RouterLink> <RouterLink to="/shoulder">Shoulder</RouterLink>
<RouterLink to="/legs">Legs</RouterLink> <RouterLink to="/legs">Legs</RouterLink>
<RouterLink to="/back">Back</RouterLink>
<RouterLink to="/biceps">Biceps</RouterLink>
<RouterLink to="/triceps">Triceps</RouterLink>
</nav> </nav>
</div> </div>
</header> </header>
@ -76,7 +77,7 @@ nav a:first-of-type {
} }
nav { nav {
text-align: left; text-align: right;
margin-left: -1rem; margin-left: -1rem;
font-size: 1rem; font-size: 1rem;

View File

@ -10,16 +10,16 @@ const router = createRouter({
component: HomeView component: HomeView
}, },
{ {
path: '/push', path: '/chest',
name: 'push', name: 'chest',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route // this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import('../views/PushView.vue') component: () => import('../views/PushView.vue')
}, },
{ {
path: '/pull', path: '/shoulder',
name: 'pull', name: 'shoulder',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route // this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
@ -32,7 +32,31 @@ const router = createRouter({
// this generates a separate chunk (About.[hash].js) for this route // this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import('../views/PushView.vue') component: () => import('../views/PushView.vue')
} },
{
path: '/back',
name: 'back',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/PushView.vue')
},
{
path: '/biceps',
name: 'biceps',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/PushView.vue')
},
{
path: '/triceps',
name: 'teiceps',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/PushView.vue')
},
] ]
}) })