[Vue.js] Vue2에서 컴포넌트 교체 없이 중첩(연속) route 만들기(슬래쉬가 %2F 16진수로 나오는 에러 해결)

 

[사건의 발단]

 

Git같은 서비스를 개발중이라 디렉토리 들어갈때마다 n개의 라우트 경로를 생성해야 될 일이 생겼다.

일반 string으로 'testdir1/testdir2/testdir3' 으로 넣으면 'testdir1%2Ftestdir2%2Ftestdir3' ㅇ..이래 ㅋ

 

구글링해도 %2F에 관해선 거~~~의 안나왔다.

그나마 route 공홈에서 언급을 했는데 이런말을 한다.

음...그렇댄다 근데 내가 원한건 이게아니야

심지어 %2F 가 들어가면 Url 복붙해서 다른페이지로 열었을때 HTTP404 Bad Request 떠서 더 안됨

 

---

[삽질의 시작]

 

route 공식에서는 중첩라우트 만드는 방법에 대해 이렇게 설명한다.

https://router.vuejs-korea.org/ko/guide/essentials/route-matching-syntax.html#%EB%B0%98%EB%B3%B5%EB%90%98%EB%8A%94-params

경로 매칭 문법 | Vue Router

 

이 부분이내가 필요한 핵심이다.

문제는 Vue 4.x버전이라 vue2에 먹냐의 문제인뎅ㅋㅋ 그냥해봄 일단안되면 하고봐야되기때문에 ㅇ ㅇ

---

[해결]

 

component

// 클릭 메소드 안에서
...
this.$router.push({ name: 'repositoryDir',
       	params: { dirname: row.path.split('/') } }).href;
...

 

router.js (라우터 설정은 별거없음)

패스가 을~마든지 추가될 수 있는 dirname뒤에 +를 붙여주면 자신 포함 몇개의 패스든 추가되는 기능이 있다(이건몰랏지?)

(* 도 있는데 자신을 포함하지 않을때도 리턴되는 페이지인듯.?자세한건 공식 ㄱ ㄱ)

    {
      path: '/repository/:reponame/:dirname+',
      name: 'repositoryDir',
      props: true,
      component: () => import('../views/RepositoryView.vue'),
    },

내가 쓴 코드다.

생각보다 간단하게 해결하지 않았는가!

 

⬇️row 돌린 html 코드(혹시 궁금하다면 참고)⬇️

data에는 api 응답값이 담겨있고 row로 그 값을 빼서 쓴다. 

row에 path가 응답으로 들어온다.

row.path

 <tr v-for="(row, idx) in data" :key="'file' + idx" @click="clickRepo(row, $event)">
              <td>{{ row.name }}</td>
              <td>{{ row.length }} B</td>
              <td>{{ row.commitDate }}</td>
              <td>{{ row.description }}</td>
</tr>​

 

---

[설명]

 

테이블을 누르면 row.path를 route 패스에 어떻게 응용하면 좋을까 생각해보았다.

 

row.path는 "testdir1/testdir2/testdir3" 이런 형태의 String으로 담겨오는데, split을 활용하여 배열로 분리했다.

 

그럼 dirname에 들어가는것은 공식에서 한 설명과 같은 배열 형태가 되는것이다!

 

이동할 디렉토리를 클릭 할 때마다 path를 응답받아 변환한 것을 console에 찍어보면

1. row.path = "testdir"   ->  row.path = ['testdir']

2. row.path = "testdir/testdir2" -> row.path = ['testdir', 'testdir2]

3. rowpath = "testdir/testdir3" -> row.path = ['testdir', 'testdir2', 'testdir3']

 

 

---

[요약]

 

응답받는 path가 없다면 이동할 Path를 String 또는 배열로 생성

String: 'test/test2/test3'

Array: ['test', 'test2', 'test3']

 

라우트 파라미터에 전달하는 시점에 넣으면됨

String일경우 >> params: { dirname: row.path.split('/') } }).href

Array의 경우 >> params: { dirname: {만든ARRAY} } }).href