基础

动态路径

mysite.com/currency/

Overriding app.vue

Create the /pages directory at the root of the project.
Create an index.vue component in the /pages directory.
Override the content in app.vue using the built-in <NuxtLayout> and <NuxtPage> components.

<NuxtLayout>
<NuxtPage/>
</NuxtLayout>

Using the built in <NuxtPage> component tells Nuxt to use the content in the /pages directory.

Displaying Details

where {id} is the dynamic value passed in to the component that tells us which id to query in the Coinlore API.

So to define the structure, we need to do two things:

Create a /currency folder under /pages, so the end result is /pages/currency
In the /currency directory create a Vue component named [id].vue (with the brackets)

we need to create a main layout that has a simple nav bar with a link to the Home page in it, so that we can easily navigate back to the home page from our currency detail pages. To do this, let’s go through the following steps.

Create the /layouts directory at the root of the project
In the layouts directory, create a Vue component called default.vue This file will contain our layout. Because it is named default, it will be used for all pages in the site.
All we really need for this site is a menu, so that’s what we will create. Let’s add the following code to the <template> section:

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
  </nav>
  <main>
    <slot />
  </main>
</template>

There are two things to notice here.

We are using the built-in <NuxtLink> component for creating internal links within our site. Because it is built-in, we don’t have to import it in any of our components, which means less code.
We are using the standard Vue slot syntax for displaying the content from our pages. We want to put the slot wherever we want the content to show up in our layout. In this case, we want it to show up as the main content below the main nav, so we put in within the <main>tags. Once you have saved the changes, you will need to stop and restart the dev server for the changes to take effect.

加载API数据

Create API endpoint

First, off of the project root, create a /server directory. Within that directory, create an /api directory, and wIthin that directory, we will create a file called [...].js

The path to this file should look like this

/server/api/[...].js

Within that file, paste the following line:

export default defineEventHandler((event) => {
  return $fetch(`https://api.coinlore.net${event.node.req.url}`)
})

详细页面

[id].vue

<script setup>
	const route = useRoute();                                       
  const { data: coin } = await useFetch('/api/ticker?id=' + route.params.id);
</script>

Display content in component

<script setup>
    const {data} = await useFetch('/api/tickers?limit=10');
</script>

<template>
   <div>
      <h2>{{ coin.name }} Detail page</h2>
      <table border="1 px solid">
         <thead>
         <th>Symbol</th>
         <th>Rank</th>
         <th>Price - US $</th>
         <th>Market Cap - US $</th>
         </thead>
         <tr>
            <td>{{ coin.symbol }}</td>
            <td>{{ coin.rank }}</td>
            <td>{{ coin.price_usd }}</td>
            <td>{{ coin.market_cap_usd }}</td>
         </tr>
      </table>
   </div>
</template>

<template>
  <main>
    <h1>Index Page</h1>

    <table border="1 px solid">
      <thead>
      <tr>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>Details</th>
      </tr>
      </thead>
      <tr v-for="currency in data.data" :key="data.data.id">
        <td>{{ currency.name }}</td>
        <td>{{ currency.symbol }}</td>
        <td>{{ currency.price_usd }}</td>
        <td>
          <NuxtLink :to="'/currency/' + currency.id">{{ currency.id }}</NuxtLink>
        </td>
      </tr>
    </table>
  </main>
</template>

Nuxt 自动加载的目录

/components,/composables,/utils

自定义 Composable

📄 /composables/useParam.ts

useRoute().params.post.toString()

To a custom composable so that we share it between multiple pages.

📄 /composables/useParam.ts

export const useParam = (key: string): string => {
  return useRoute().params[key].toString()
}

It will take a key and returns the value of the param. (make sure you add the string type for the key parameter)

Now back in the PostDetailsPage, we can just call one function to get the post param:

const postSlug = useParam('post')

And since everything in the composables folder will be auto-imported, we don’t even need to import useParam.

基础

基础

安装配置

动态路径

自定义布局

加载API数据

Nuxt 自动加载的目录

自定义 Composable