如何从nuxt中的页面名称创建连字符路由

Question

我想在nuxt中有像privacy-policy或terms-condition这样的路由，而没有像Privacy-Policy或Terms-Condition这样的页面名称。有没有一种简单的方法可以做到这一点，而不需要定制路线或其他任何东西。

Answer 1

如果您确实有一个名为BoringPage.vue的页面，但又想要更花哨的东西，您可以这样写

<router>
{
  alias: [
    '/cool-page',
  ]
}
</router>

<template>
...
</template>

并且可以通过/cool-page访问BoringPage。

您所需要做的就是安装router-extras模块。

Answer 2

在pages目录中创建文件_slug.vue

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // When calling /privacy-policy the slug will be "privacy-policy"
      return { slug }
    }
  }
</script>

Nuxt动态页面：https://nuxtjs.org/docs/2.x/directory-structure/pages#dynamic-pages