SEF地址是如何使用Nuxt路由实现的？

Question

我正在使用

Nuxt 3

和

Vue

制作一个网站。我需要一个这样的页面：

/articles/section

此页面应调用文件

/pages/articles.vue

并传递值

section

作为参数。我创建了一个文件，并在

nuxt.config.ts

中添加了以下代码：

router: {
  extendRoutes (routes, resolve) {
    routes.push({
      path: '/articles/:section',
      component: resolve(__dirname, 'pages/articles.vue')
    })
  }
}

但是现在当我进入

/articles/section

页面时，

Nuxt

给我一个 404 错误。我错过了什么？

Answer 1

我想不出与您想要实现的目标相关的更好的例子。因此，我创建了自己的示例，希望这能指导您实现您的需求。

将您的

nuxt.config.ts

上的代码更改为此代码。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    hooks: {
        'pages:extend'(pages) {
            pages.push({
                name: 'section',
                path: '/articles/:section',
                file: '~/pages/articles.vue'
            })
        }
    }
})

文章页面的内容在动态部分将是相同的。

这是页面的文件结构。

- pages
 - articles.vue 
 - aticles //👈 This is a folder
  -[section].vue

要查看其实际效果，请复制这些代码并在您的终端上进行测试。

~/pages/articles.vue

<script lang="ts" setup>
const searchedArticle = ref<string | null>(null)

function onSearchArticle() {
    useRouter().push(`/articles/${searchedArticle.value}`)
}

</script>
<template>
    <main>
        <input
            type="text"
            v-model="searchedArticle"
            placeholder="Search Article"
        />
        <button @click.prevent="onSearchArticle">Search</button>
        <div class="go-back">
            <NuxtLink to="/articles">Back to Article's page</NuxtLink>
        </div>
        <div class="searched">
            <h2>Section article: {{ $route.params.section }}</h2>
        </div>
    </main>
</template>
<style scoped lang="css">
.searched {
    margin-top: 40px;
}

.go-back {
    margin-top: 10px;
}
</style>

我希望这能给你一个想法，这个例子在查看动态部分时不会抛出 404 错误。