[Vue.js]vue-router-動的ルーティング、ネストルーティング

1.動的ルーティング
expressを用いてルータを開発する際には,ルーティング経路「/user/:id」を介してパラメータ値を伝達してルーティングする経験があり,vue-routerも同様に動的にルーティングすることができる.
1) Param
ルータパスに作成されたダイナミックセグメントはparamと呼ばれ、パラメータはコロン:から始まります.
ルーティングが一致するコンポーネントでは、this.$route.paramsを使用してパラメータにアクセスできるため、コンポーネントのテンプレートに$routes.params.idを作成して現在のユーザidを表示することができる.

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

同じルーティングには複数のダイナミックセグメントがあります.
/user/:username/post/:post_id
path例)/user/evan/post/123
$route.params : {username: 'evan', post_id: '123'}
2)params変更への応答
ダイナミックセグメントを使用する場合、ダイナミックセグメントが変更されても同じ構成部品インスタンスが再使用されることに注意してください./user/fooおよびuser/barは、同じ構成部品を示し、構成部品ライフサイクルhookを呼び出さない.したがって,パラメータの変化に応じて反応するには,$route対象に対してwatchを行うだけでよい.(またはbeforeRooteUpdateメソッドを使用)

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 경로 변경에 반응하여...
    }
  }
}

beforeRouteUpdate

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

3)その他

vue-routerは、選択的ダイナミックセグメント、カスタム通常モードなど、さまざまな高度なマッチングモードをサポートします.
例)https://next.router.vuejs.org/guide/essentials/route-matching-syntax.html(v4.x
https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js(v3.x )

マッチング優先度:ルーティング定義および順序によって決定される.最初に定義したパスの優先度が高くなります.

2.ネストルーティング-childrenオプション
多層ネストルーティングはvue-routerのサブオプションでも実現できます
例)
/user/david/profile
/user/david/posts

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        { path: '', component: UserHome },
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

/で始まるネストされたルーティングはルートパスとみなされるため、サブオプションのパスに完全なパスは作成されません.
注-Vue Router公式ドキュメント
https://next.router.vuejs.org/guide/