LoginSignup
0
0

More than 5 years have passed since last update.

[NUXT] 複数のURLで同じコンポーネントを表示させる

Posted at

例として

  • post/1
  • post/2
  • post/3

の3つともに同じコンポーネントを使いたい場合の方法。

コンポーネントの作成

pages/post/_id.vue をつくる。

_ をつけるのがミソ。
_ のあとの名前(今回はid)は、あとで変数として取りたい時に使いたい名前にしておくとよい。

これだけで、 上記3つのURL全てで pages/post/_id.vue が表示されるようになる。

URLで使用されているパラメータは $route.params.id で取れる。

post/_id.vue
<template>
    <div>
        <div class="title">記事タイトル</div>
        <p>このページのidは{{$route.params.id}}です</p>
    </div>
</template>

ブラウザ↓
Screen Shot 2018-10-09 at 17.05.35.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0