Since we also want to switch to a form in this page, it would be a good idea to structure our components with nested routes--each route can have child routes if they have at least a router view! So under the /tickets router, we will have two children for now:
- '' will be the tickets list (full path will be /tickets/). It acts like the default route under /tickets.
- '/new' will be the form to send new tickets (full path will be /tickets/new/).
- Create a new NewTicket.vue component with a temporary template:
<template>
<div class="new-ticket">
<h1>New ticket</h1>
</div>
</template>
- In the routes.js file, add the two new routes under the /tickets route inside the children attribute:
import Tickets from './components/Tickets.vue'
import NewTicket from './components/NewTicket.vue'
const routes = [
// ...
{ path: '/tickets', component: TicketsLayout,
meta: { private: true }, children: [
{ path: '', name: 'tickets', component: Tickets },
{ path: 'new', name: 'new-ticket', component: NewTicket },
] },
]
Since the first child route is an empty string, it will be the default when the parent route is resolved. This means you should move the name of the route ('tickets') from the parent to it.
- Finally, we can change the TicketsLayout component to use a router view along with a few buttons to switch between the child routes:
<template>
<main class="tickets-layout">
<h1>Your Support tickets</h1>
<div class="actions">
<router-link
v-if="$route.name !== 'tickets'"
tag="button"
class="secondary"
:to="{name: 'tickets'}">
See all tickets
</router-link>
<router-link
v-if="$route.name !== 'new-ticket'"
tag="button"
:to="{name: 'new-ticket'}">
New ticket
</router-link>
</div>
<router-view />
</main>
</template>
You can use the tag prop on router links to change the HTML tag used to render it.
As you can see, we hide each button depending on the current route name--we don't want to display the Show tickets button when we are already on the tickets page, and we don't want the New ticket button when we are already on the corresponding form!
You can now switch between the two child routes and see the URL change accordingly:
