Nuxt2快速上手路由、异步数据、中间件等
<template>
<div>
<h1>文章列表</h1>
<ul>
<li v-for="article in articles" :key="article.id">
<NuxtLink :to="`/article/${article.id}`">{{ article.title }}</NuxtLink>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData({ $axios }) {
const articles = await $axios.$get('/api/articles')
return { articles }
},
middleware: 'authentication'
}
</script>这个例子展示了如何在Nuxt.js 2.x中使用asyncData方法来进行服务器端渲染，使用$axios来进行API请求，以及如何使用middleware应用全局中间件。这个例子简洁明了，并且教会了开发者如何在实际项目中应用这些概念。
评论已关闭