Routing
One core feature of Nuxt is the file system router. Every Vue file inside the pages/ directory creates a corresponding URL (or route) that displays the contents of the file.
Pages
Nuxt routing is based on vue-router and generates the routes from every component created in the pages/ directory, based on their filename.
This file system routing uses naming conventions to create dynamic and nested routes.
Directory Structure
pages/
--| index.vue
--| product/
----| [slug].vue
--| seller/
--| store/
----| [slug].vue
----| fruit-market.vue
Navigation
The <NuxtLink> component links pages between them. It renders an tag with the href attribute set to the route of the page. Once the application is hydrated, page transitions are performed in JavaScript by updating the browser URL. This prevents full-page refreshes and allows for animated transitions.
<ul>
<li v-if="data?.footer?.facebook">
<NuxtLink :to="data.footer.facebook" target="_blank" class="text-content">
<Icon name="ri:facebook-fill" size="13"></Icon>
</NuxtLink>
</li>
<li v-if="data?.footer?.twitter">
<NuxtLink :to="data.footer.twitter" target="_blank" class="text-content">
<Icon name="ri:twitter-fill" size="13"></Icon>
</NuxtLink>
</li>
<li v-if="data?.footer?.instagram">
<NuxtLink :to="data.footer.instagram" target="_blank" class="text-content">
<Icon name="ri:instagram-fill" size="13"></Icon>
</NuxtLink>
</li>
<li v-if="data?.footer?.pinterest">
<NuxtLink :to="data.footer.pinterest" target="_blank" class="text-content">
<Icon name="ri:pinterest-fill" size="13"></Icon>
</NuxtLink>
</li>
</ul>