vue-router 링크가 가끔 잘못된 페이지로 연결되거나 전혀 작동하지 않는 이유는 무엇입니까?

vue-router 링크가 가끔 잘못된 페이지로 연결되거나 전혀 작동하지 않는 이유는 무엇입니까?

Vue Router를 사용하는 Vue.js 단일 페이지 응용 프로그램에서 이상한 오류가 발생했습니다.이 경우 대상 페이지를 결정하는 변수는 올바르지만 링크가 올바른 페이지로 연결되지 않을 수 있습니다.

이것은 설명보다 보기 좋기 때문에 현재 상태로 앱을 도입했습니다.http://daggy1.watchduck.net/nodes/2에 접속하여 부모/자녀 섹션의 링크를 클릭하여 해당 링크를 안내하는 페이지에서 동일한 작업을 다시 수행합니다.이동하는 페이지가 올바르지 않을 수도 있고 링크가 제대로 작동하지 않을 수도 있습니다.맨 위에 있는 전체 목록의 링크는 항상 정상적으로 작동합니다.

Devtools가 활성화되고 두 번 모두 클릭(a click b및 페이지 변경(a ----> b)가 콘솔에 기록됩니다.

스크린샷에서는 11페이지의 링크 9를 클릭하면 9페이지가 아닌 2페이지로 이어지는 것을 볼 수 있습니다.

GitHub에 코드를 올렸습니다.https://github.com/watchduck/daggy

전체 목록의 링크는 에 있습니다.

<router-link v-for="node in nodes"
             :to="{name: 'node', params: {id: node.id, name: node.name}}"
             tag="li"
             active-class="active">
    <a>{{node.id}}: {{node.name}}</a>
</router-link>

해당자가 에 있는 동안

<router-link v-for="relative in relatives"
             :to="{name: 'node', params: {id: relative.id, name: relative.name}}"
             tag="li"
             @click.native="clickDebug(relative.id)">
    <a>{{relative.id}}: {{relative.name}}</a>
</router-link>

둘다요.Nodes.vue그리고.NodeRelatives.vue는 에서 사용됩니다.

다음 두 가지 방법으로 콘솔에 기록됩니다.

• clickDebug에NodeRelatives.vue는 현재 페이지와 클릭된 링크를 기록합니다.a click b).
• 의 감시자Node.vue는 마지막 페이지와 새 페이지를 기록합니다(a ----> b).

당연히 나는 어떻게 내 링크 행동하다 정확하게 만드는지 알고 싶다.

그러나 나는 또한 힌트 어떻게 이와 같은 벌레를 찾기에 대해 매우 기쁠 것이다.어떻게 Vue.js 앱 및 팁을 추가한 자주 물었다 질문 —고"는 크롬 확장을 사용한다" 같은 대답은 너무 자주 뭔가.만약 누군가가 크롬 확장을 사용하여 이 문제를 해결한다면, 나는 그것을 보고 싶다.나는 확신해 작은 디버깅 screencast 매우 많은 사람들에게 도움이 될 것입니다.

---

Edit 1:Slotheroo 지적하는 문제와 관련이 있다.tag="li"속성과 네스트된 앵커태그router-link. 삭제 후 새로운 코드를 사용하여 별도의 프런트 엔드를 추가했습니다.
올드:http://daggy1.watchduck.net/nodes/2뉴:http://daggy1a.watchduck.net/nodes/2

라고 하는 다른 지점에 있습니다.simple-router-linksGitHub에:NodeRelatives.vue

(내가 찾고 있는 그냥 문제를 방지할 수가 해결책이 아니야.).

에 이벤트청취자는 '''의 ''가li이 되고 만, 알고 , 「이러다」, 「이러다」, 「이러다」, 「이러다」, 「이러다」, 「이러다」, 「이러다」, 「이러다」, 「이러다」에 지나지 않습니다.clickDebug-했을 때 됩니다.

---

편집 2: 이 동작은 생각만큼 산발적이지 않습니다.

• 페이지를 새로고침하면 모든 링크가 작동합니다.
• http://daggy1.watchduck.net/nodes/9,부터 시작하여 parent 2를 클릭하고 parent 1을 클릭합니다.링크 1은 동작하지 않습니다.(2세 아이부터 3, 4, 5, 9 등)
• http://daggy1.watchduck.net/nodes/10,부터 시작하여 부모 1, 자녀 2를 클릭합니다.링크 2는 13으로 연결됩니다.
• http://daggy1.watchduck.net/nodes/1,부터 시작하여 child 2를 클릭하고 parent 1, 2, 1, 2, 1...을 클릭합니다. (10부터 시작하는 경우도 마찬가지입니다.

---

편집 3: 백엔드에 대한 Axios 콜이 정적 데이터로 대체되면 http://daggy1b.watchduck.net/nodes/2가 작동합니다.
.static-data나중에 최소 버전(1c)으로 축소된 GitHub: https://github.com/watchduck/daggy/tree/static-data/front/src

이 " " " 에 되었을 때getNodeRelatives()가 생겼네요이 0 "0"으로 되어 있는 에도 다음과 같습니다.

getNodeRelatives() {
    let f = () => {
        this.relativesInBothDirections = this.$store.state.nodeRelatives[this.id]
    }
    setTimeout(f, 0)
}

---

편집 4: 이벤트청취자가 끊어진 링크에서 제거되면 작동합니다.다음 스크린샷은 끊어진 링크에서 페이지 1로 이벤트청취자를 삭제하는 방법을 보여줍니다.다시 클릭하면 페이지 1이 표시되지만, 페이지 새로고침으로 표시되며 앱 내에서는 표시되지 않습니다.

---

편집 5: 발행했습니다.https://github.com/vuejs/vue-router/issues/2305
이를 위해 정적 데이터로 버전을 최소화했습니다.http://daggy1c.watchduck.net/nodes/2

이건 확실히 이상한 거야.아직 완전히 정리된 것은 아니지만, 제가 배운 것을 공유하겠습니다.

트러블 슈팅의 경우는, 다음의 순서에 따릅니다.

1. Vue 개발자 도구를 엽니다.
2. router-link 컴포넌트를 클릭하면 router-link 컴포넌트가 콘솔에서 $vm0으로 접근 가능하도록 설정됩니다.
3. 해서 솔솔음음음음음음음음음음음음 go go go go go라고 입력합니다.$vm0.to.params.id라고 입력합니다. ID 의 1 「 「」 「ID」 ） 。
4. 하다, , 하다, 하다, 하다, 아이디를 변경합니다.$vm0.to.params.id = 7에는 값이7이 ) (7이 아니었음)
5. 창의 링크를 클릭하면 이전에 설정된 위치가 아닌 /nodes/7로 이동합니다.

여기서 이상한 점은 상위 13개 노드에서는 작동하지만 노드 친척(부모/자녀)에서는 작동하지 않는다는 것입니다.param으로 ID를 변경해도 링크 클릭 위치에는 영향을 주지 않습니다.

트러블 슈팅 파트 2:

1. 일반 브라우저 창에서 노드 링크 중 하나를 마우스 오른쪽 버튼으로 클릭하고 검사합니다.그러면 개발 도구의 요소 탭이 열립니다.
2. 이벤트 리스너 서브탭을 클릭합니다. 클릭 을 알 수.<a> 부착
3. 이제 오른쪽 버튼을 클릭하여 관련 링크 중 하나를 검사합니다.
4. 여기서 클릭 하면 두 있음을 알 수 . 는 '클릭 이벤트', 하나는 '클릭 이벤트', 하나는 '클릭 이벤트, 은 '클릭 이벤트'입니다.<a>를 붙이고 를 붙입니다.<li> 부착

그 이 다른 하고, 그 가 그 하게 한다.<li>잘못된 위치를 가리키는 태그입니다.

제가 가지고 있는 다른 관찰 증거 중 하나는 루트가 잘못된 링크로 갔을 때 보통 이전 페이지에 대한 올바른 링크였다는 것입니다.무슨 뜻인지 설명할게요.

첫 번째 보기:노드 5 페이지를 보고 있습니다.노드 2의 부모를 가지며 노드7과 노드8의 자녀입니다여기서 Node 7은 첫 번째 아이입니다.

[ Node 2 ]을 클릭합니다.

두 번째 보기:이제 노드 2의 페이지로 이동합니다.노드 1의 부모 및 노드 9, 4, 5, 및 3의 자식입니다.노드 9는 첫 번째 아이입니다.Node 9를 클릭하면 Node 7로 이동합니다. Node 7은 이전 페이지에서 올바른 첫 번째 아이였을 것입니다.이는 페이지의 데이터가 새로 고쳐진 것처럼 보여도 링크가 제대로 업데이트되지 않았음을 나타냅니다.

트러블 슈팅을 계속하기 위해 권장하는 사항:

• 관련 노드에 대한 라우터 링크의 태그="li" 부분을 제거한 후 어떻게 렌더링되는지 확인합니다.
• 노드 내에서의 반복방법은 노드 내에서의 반복방법과 최대한 유사하도록 합니다.
  • tr이 아닌 라우터 링크에서 반복해 보겠습니다.
• 정적 데이터를 노드 관련 구성 요소에 전달해 보십시오.라우터 링크 정보와 데이터 사이에 불일치가 발생하고 있는 Axios 호출에 어떤 지연이 있는지 궁금합니다.

언급URL : https://stackoverflow.com/questions/51332783/why-do-my-vue-router-links-sporadically-lead-to-the-wrong-page-or-dont-work-at