29 lines
756 B
Markdown
29 lines
756 B
Markdown
# 7. Routing
|
|
|
|
Routing will be handled by Nuxt's file-based router. All pages will be created as `.vue` files in the `app/pages` directory.
|
|
|
|
**Route Configuration Example (`app/pages/cell/[id].vue`)**
|
|
```vue
|
|
<script setup lang="ts">
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
const cellId = route.params.id as string;
|
|
|
|
// Fetch cell data using the service
|
|
const { data: cell, pending, error } = await useAsyncData(
|
|
`cell-${cellId}`,
|
|
() => cellService.getCellById(cellId)
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="pending">Loading...</div>
|
|
<div v-else-if="error">Error loading Cell: {{ error.message }}</div>
|
|
<div v-else-if="cell">
|
|
<h1>{{ cell.commonGood }}</h1>
|
|
<!-- Display cell details here -->
|
|
</div>
|
|
</template>
|
|
```
|