web-dev-qa-db-ja.com

vue.jsを使用して複数のネストされたルートを実行する方法

それはネストされたルートをより多くのものにすることができますか？

私はこのようなものを作りたいです：

+--------------------+
| User               |
| +----------------+ |
| | Profile        | |
| | +------------+ | |
| | | About      | | |
| | | +--------+ | | |
| | | | Detail | | | |
| | | +--------+ | | |
| | +------------+ | |
| +----------------+ |
+--------------------+
 _

そのため、Web内はこのようになります

リンク： /localhost/user _

webディスプレイ：

USER
 _

リンク： localhost/user/profile _

webディスプレイ：

USER
  PROFILE
 _

リンク： localhost/user/profile/about _

webディスプレイ：

USER
  PROFILE
    ABOUT
 _

リンク： localhost/user/profile/about/detail _

webディスプレイ：

USER
  PROFILE
    ABOUT
      DETAIL
 _

jSFIDDLEを使用したコード例は非常に高く評価されます。ありがとう。

javascriptvue.jsvuejs2vue-componentvue-router
5
Jazuly

対応するルートをネストするだけです（明らかにユーザーのidパラメータも必要になるでしょう）。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          path: 'profile', component: Profile,
            children: [
              {
                path: 'about', component: About,
                  children: [
                    {
                      path: 'details', component: Details,
                    }
                  ]
              }
           ]
        }
      ]
    }
  ]
})
 _

同じコードですが、まとめられた（多分それはより良く読むのに役立ちます）。

const router = new VueRouter({
  routes: [{
    path: '/user/:id', component: User,
      children: [{
        path: 'profile', component: Profile,
          children: [{
            path: 'about', component: About,
              children: [{
                path: 'details', component: Details,
              }]
          }]
      }]
   }]
})
 _
2
Billal Begueradj