Nuxt.jsでのルーティングで小窓の中に別のVueを展開したい

前提・実現したいこと

Nux.jsでのルーティングで、
/pages/test/
index.vue
a.vue
b.vue

のようなファイルがあったとします。
index.vueの中に動的に切り替えたい窓があり、
そこにaやbを表示するような構成を考えています。

これを
/test/a
/test/b

といったルーティングによって制御することはできますでしょうか。
ファイルの位置はここに限った必要はありません。
nuxtではレイアウトという別のファイルでやりとりするというのを見ましたが、よくわかりません。
実現手法をおしえていただけますでしょうか。
#vue-routerで成功している例
{
path: '/test',
name: 'test',
component: index,

  children: [{
      path:'a',
      component:a
  },{
      path: 'b',
      component:b
    }],

}

#ためしたこと
index.vueに

<div id="nav">
  <nuxt-link to="/test/a/">A</nuxt-link> |
  <nuxt-link to="/test/b/">B</nuxt-link>
</div>

....<nuxt>

のような設置ではうまくできませんでした。

行動規範の内容に同意します

回答1件

IDによるページを動的に作成したいという感じでしょうか？
このページの動的なルーティングが参考になるかと思います。
https://ja.nuxtjs.org/docs/2.x/features/file-system-routing/

個別ページに対するカスタマイズはこちらのページが参考になりそうです。
https://b1tblog.com/2019/12/17/nuxt-routing/

$route.paramsでパラメータを取得して、その値によって読み込むコンポーネントを変える形でどうでしょうか？
参考
https://jp.vuejs.org/v2/guide/components.html
の動的なコンポーネント部分

投稿2021/03/12 07:38

gogoweb_ikeda

総合スコア1426

mohumohu_299

2021/03/12 08:53

回答ありがとうございます。IDではなく、純粋にアドレスです。親アドレスでトップ用コンポーネント、子供アドレスつけて、そのコンポーネント部を入れ替える。と言う仕組みです。上げていただいた後者のほうですと、Nuxtではページファイルが存在しないので空白画面になってしまいます。前者も基本的にはおなじで、全体が遷移してしまいます。 Vue-routerではchildrenを指定することで、親ページの中にchildrenをルーターで指定したうえで一部を変える動作をアドレスで制御できるのですが。 childrenで調べてみるとnuxt-childというのがヒットしました、日本人でちゃんとこれを書いてる人が思った以上に少なく近年のログしかありませんが、ちょっと調べてみます。。Nuxt親切なようで独自のファイルの扱いを理解しないとまるでソース追えませんね。。