--- name: vue-routing-guide description: Comprehensive guide to the file-based routing system used in this project. Use this skill when you need to create new pages, understand URL mapping, or handle navigation logic using unplugin-vue-router. --- # Vue Routing Guide ## Overview This project uses **File-Based Routing** powered by [`unplugin-vue-router`](https:\/\/github.com\/posva\/unplugin-vue-router). This means the logical structure of your `src\/pages` directory directly maps to the application's URL routes. You generally do **not** need to manually configure routes in `src\/router\/index.js`. ## Creating Routes To add a new route, simply create a Vue component in the `src\/pages` directory. ### Basic Routes | File Path | URL Path | |-----------|----------| | `src\/pages\/index.vue` | `\/` | | `src\/pages\/about.vue` | `\/about` | | `src\/pages\/users\/index.vue` | `\/users` | | `src\/pages\/contact-us.vue` | `\/contact-us` | ### Dynamic Routes Use square brackets `[]` to denote dynamic segments. | File Path | URL Path | Parameters | |-----------|----------|------------| | `src\/pages\/users\/[id].vue` | `\/users\/123` | `{ id: '123' }` | | `src\/pages\/posts\/[slug].vue` | `\/posts\/my-post` | `{ slug: 'my-post' }` | **Accessing params in script setup:** ```vue