74635


Nuxtに詳しい方教えてください。  
私は普段はVue_cliでルーティングは普通にVue-routerを素で使っています。

Nuxtを使う必要があり四苦八苦しています。Vue-routerをラップしてるので内部的には同じものらしいですが、設定の仕方が独自で意味が分かりません。

やりたいことは、

こちらのような画面で  
[![画像の説明をここに入力](https://i.stack.imgur.com/Xpoo0.png)](https://i.stack.imgur.com/Xpoo0.png)  
~/hoge/  
のアドレスで特定の窓エリアに最初のページ用のAというコンポーネントがはまっており  
上部リンクはそれぞれ  
[link1:~/hoge/b/,link2:~/hoge/c/,link3:~/hoge/d/]  
にリンクさせますが、/hoge/での皮UI部分は遷移せず、抜いてる窓のなかのコンポーネントだけを変化させたいのです。  
たとえばvue-routerの素のコーディングですと

[code]

    [{
    path: '/hoge',
    name: 'hoge',
    component: hoge,
      children: [{
          path:'',
          component:a
      },{
          path: 'b',
          component: b
        },{
          path: 'c',
          component: c
        },{
          path: 'd',
          component: d
        }]
    }]
    
[/code]

このような手法で私が言わんとしてる機能を実装できるのですが、Nuxtではどのように記述するのでしょうか。。。  
御存じの方、教えてください。


CC BY-SA 4.0
2021-03-12T17:45:03.733
74634
2021-03-12T17:59:06.957
19584
question
javascript vue.js nuxt.js
Nuxt.jsでのルーティングである親Layout下で特定の箇所をアドレスの変更によって動的に部分的に変更したい。nuxt-child?


こちらのページが求めているサンプルになるのではないでしょうか（Open Sandboxから実際に触れます）

<https://ja.nuxtjs.org/examples/routing-nested-pages/>

NuxtChildコンポーネントを使いページをネスト表示できます

nuxt.jsはデフォルトではpagesフォルダ内のファイル構成でルートファイルを生成します  
`npm run dev` などのコマンドをすると.nuxtフォルダにrouter.jsが生成されているので中身を見ると何となく分かるかと思います


CC BY-SA 4.0
2021-03-12T17:59:06.957
74635
2021-03-12T17:59:06.957
298
74634
answer