# 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>
```