如何在nuxtjs中使用/foo-:bar路由？

<template>
  <div>
    <h1>{{ bar }}</h1>
    <p>This is the foo-{{ bar }} page.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bar: ''
    }
  },
  async asyncData({ params }) {
    return { bar: params.bar }
  },
  head() {
    return {
      title: `Foo - ${this.bar}`,
      meta: [
        { hid: 'description', name: 'description', content: `This is the foo-${this.bar} page.` }
      ]
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

<template>
  <div>
    <nuxt-link :to="`/foo-${bar}`">Go to foo-{{ bar }}</nuxt-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bar: 'example'
    }
  }
}
</script>