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" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/push">Push</RouterLink>
<RouterLink to="/pull">Pull</RouterLink>
<RouterLink to="/chest">Chest</RouterLink>
<RouterLink to="/shoulder">Shoulder</RouterLink>
<RouterLink to="/legs">Legs</RouterLink>
<RouterLink to="/back">Back</RouterLink>
<RouterLink to="/biceps">Biceps</RouterLink>
<RouterLink to="/triceps">Triceps</RouterLink>
</nav>
</div>
</header>
@ -76,7 +77,7 @@ nav a:first-of-type {
}
nav {
text-align: left;
text-align: right;
margin-left: -1rem;
font-size: 1rem;

View File

@ -10,16 +10,16 @@ const router = createRouter({
component: HomeView
},
{
path: '/push',
name: 'push',
path: '/chest',
name: 'chest',
// 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: '/pull',
name: 'pull',
path: '/shoulder',
name: 'shoulder',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// 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
// which is lazy-loaded when the route is visited.
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')
},
]
})