programing

Vue-router를 사용하면 단순히 경로를 직접 사용하는 것보다 이름 있는 경로를 사용하는 것이 더 좋은 점이 있습니까?

firstcheck 2022. 7. 2. 21:56
반응형

Vue-router를 사용하면 단순히 경로를 직접 사용하는 것보다 이름 있는 경로를 사용하는 것이 더 좋은 점이 있습니까?

공식 문서에 의하면

루트에 링크하거나 네비게이션을 실행하는 경우 특히 루트를 이름으로 식별하는 것이 더 편리할 수 있습니다.

그럼 어떻게 하면 더 편리할 수 있을까요?

<router-link :to="{ name: 'user', params: { id: user.id }}">
   {{ user.name }}
</router-link>

<router-link :to="'/user/' + user.id">
   {{ User.name }}
</router-link>

뭔가 확실한 걸 놓치고 있는 것 같아.

저는 항상 명명된 경로를 이용합니다.

장점은 루트의 경로를 변경할 필요가 없다는 것입니다.<router-link>또는this.$router.push()불러.

이는 프로그래밍에서 마법의 값을 피하고 대신 명명된 상수를 사용하는 이유와 비슷합니다. 즉, 코드 내의 모든 값을 찾아 교체하지 않고도 한 곳에서 값을 변경할 수 있습니다.

명명된 경로를 사용하지 않으면 코드가 각 경로의 경로에 단단히 바인딩되므로 다른 경로를 변경하지 않고 변경할 수 없습니다.명명된 루트는 루트 경로로부터 코드를 독립시킵니다.루트의 패스에 관계없이 동작합니다.

또 다른 장점은 네스트된 루트에 대한 파라미터/쿼리 상속을 이용할 수 있다는 것입니다.풀 패스를 재구축할 필요는 없습니다.자경로의 이름만 전달하면 Vue는 기존의 모든 파라미터를 사용하여 풀 패스를 구축할 수 있습니다.

다음과 같은 루트가 있다고 가정합니다.

{
  name: 'user',
  path: '/user/:id',
  children: [
    {
      name: 'profile',
      path: 'profile'
    }
  ]
}

현재 루트 경로는/user/1프로파일 페이지로 이동하려면 다음 중 하나를 수행해야 합니다.

this.$router.push({ name: 'profile' })

또는

this.$router.push('/user/' + this.$route.params.id + '/profile')

전자는 더 단순하고 오류가 적습니다.

언급URL : https://stackoverflow.com/questions/52231522/using-vue-router-is-there-any-advantage-of-using-named-routes-than-just-using-t

반응형