Nuxtのページング実装で記事詳細のテンプレートに遷移してしまう

前提・実現したいこと

NuxtとmicroCMSでお知らせ一覧のページングを実装したいです。
お知らせは詳細ページをもっていて、データはmicroCMSから取得してきます。

公式ブログ（NuxtのJamstack構成におけるページングの実装）を参考に
ページングを実装しているのですが、
一覧ページのURLに２ページ目を指定すると記事詳細のテンプレートに飛んでしまいます。

該当のソースコード

ディレクトリの構成：

/pages/news/index.vue
/pages/news/_id/index.vue

nuxt.config.js：

javascript
1export default {
2
3  router: {
4    extendRoutes(routes, resolve) {
5      routes.push({
6        path: '/news/:p',
7        component: resolve(__dirname, 'pages/news/index.vue'),
8        name: 'news',
9      })
10    },
11  },
12  ...
13}

挙動：

/news/ -> 記事一覧
/news/2/ -> 記事詳細
/news/xxxx/ -> 記事詳細

/news/2/と打つと記事一覧の２ページ目に飛ぶようにしたいのですが
記事詳細のテンプレートに遷移してしまうという現象に陥っています。

試したこと

記事詳細と区別するため、pathプロパティにページング用のパスを追加してみました
→TOPページにリダイレクトされます・・

  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/news/page/:p', // pageを追加
        component: resolve(__dirname, 'pages/news/index.vue'),
        name: 'news',
      })
    },
  },

ページ番号も記事のidとみなされているから詳細に飛んでしまうというところまで緒を掴めたのですが、
どう対処して良いのかわからず、、お手数をおかけしますがご教授いただけるとありがたいです。

よろしくお願いします。