Nuxt.jsでURLのパラメーターを元に動的に表示させたい

Question

PHPなどでよくやる「index.php?id=1」の1を変えて動的にページを表示させたいだけなのですが、Nuxt.js難しくてよくわかりません。

Nuxt.js + Express + axios
バージョンはすべて最新です。

URLのパラメーターを元にaxiosでMySQLからデータを引っ張ってきて表示させたいです。
例えば、MySQLで以下のようなTABLEがあったとします。

id	name
1	福沢諭吉
2	夏目漱石
3	野口英世
4	新渡戸稲造
5	樋口一葉

/server/api.js

const express = require('express');
const router = express.Router();
const mysql = require('mysql2/promise');

const mysqlConfig = {
  "host": "localhost",
  "port": 3306,
  "user": "root",
  "password": "",
  "database": "test"
};

router.get('/fuga', async (req, res, next) => {
  try {
    const connection = await mysql.createConnection(mysqlConfig);
    const sql = `SELECT name FROM hoge WHERE id = ?`;
    const [rows] = await connection.query(sql, [req.query.id]);
    connection.end();
    res.send(rows[0]);
  } catch (err) { console.error(err); }
});

module.exports = router;

/pages/index.vue

<template>
  <section>
    id: {{$route.query.id}} &nbsp;&nbsp; name: {{name}}
    <br>
    <br>
    <nuxt-link :to="{'path':'/', 'query':{'id':1}}">ID 1</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':2}}">ID 2</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':3}}">ID 3</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':4}}">ID 4</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':5}}">ID 5</nuxt-link><br>
  </section>
</template>

<script>
import axios from "axios";

export default {
  async asyncData(context) {
    const nameStr = await axios.get("http://localhost:3000/api/fuga", {
      params: {
        id: context.query.id
      }
    });
    return { name: nameStr.data.name };
  }
};
</script>

<style>
body {
  padding: 10px;
}
</style>

http://localhost:3000/?id=1 にアクセスすると、

id: 1 name: 福沢諭吉

ID 1
ID 2
ID 3
ID 4
ID 5

リンクになっているID 3をクリックすると

id: 3 name: 福沢諭吉

ID 1
ID 2
ID 3
ID 4
ID 5

本来「野口英世」になっていなければならないところが「福沢諭吉」のままです。

画面を遷移させるのではなくて再描画すればいいのかと、watchQueryなどいろいろいじったのですが、どうにもうまくいきません。

どのように書けばいいのでしょうか。。。

Answer 1

自己解決です。あまり納得いってませんが。

Nuxt.jsでは下記の書き方での動的表示に対応していないもようです。
/?id=1

マニュアルにあるようにこちらのパラメーターの書き方のみになるようです。
/1

なので、ディレクトリ構造を
/index.vue
ではなくて、
/_id/index.vue
にするだけで動的表示は実現できます。

パラメーターが複数、/1/fooなどでアクセスしたい場合は
/_id/_name.vue
となります。

とりあえず今はこちらでも構わないので、これにて閉めさせて頂きます。
でもちょっとダサッｗ