미니 프로그램 구성 요소 내에서 페이지 점프 방법을 정의할 때 주의할 사항

구성 요소 내에서 페이지를 이동할 때 경로 URL에 대한 참고 사항

디렉토리 구조

문제 설명

그 중 FleetMessage.vue 는 커스텀 컴포넌트이고, index.vue 는 이 컴포넌트를 참조하고 사용하는 파일이고, applicationContent.vue 는 점프 대상 파일이며, 해당 페이지로 점프하기 위한 메소드가 커스텀 컴포넌트에 정의되어 있습니다.

// fleetMessage.vue
methods: {
    
    
	// 跳转
	goto(obj) {
    
    
		console.log('@@')
		uni.navigateTo({
    
    
			url:`../pages/notification/applicationContent?id=${
      
      obj.id}`
		})
	}
}

이때 사용자 정의 컴포넌트의 위치에서 시작하여 대상 파일인 application.vue를 가리키는 상대 경로가 사용됩니다.페이지를 이동할 수 없지만 콘솔에서는 오류를 보고하지 않으며 @@이 표시됩니다. 인쇄되었습니다.

해결책

분석 결과, index.vue 파일에 커스텀 컴포넌트가 사용되었기 때문에 점프 경로 URL은 커스텀 컴포넌트 자체의 디렉터리 위치가 아닌, 커스텀 컴포넌트를 사용한 파일의 디렉터리 위치로 시작해야 하기 때문입니다.

// index.vue
<template>
	// 使用自定义组件
	<fleetMessage></fleetMessage>
</template>
<script>
import fleetMessage from '../../components/fleetMessage.vue'
export default {
    
    
	components:{
    
     fleetMessage }
}
</script>

따라서 점프 경로 URL을 다음과 같이 변경해야 합니다. url: ../notification/applicationContent?id=${obj.id}
이때 페이지가 성공적으로 점프한 것을 확인할 수 있습니다.

아이디어 개선

참고: 사용자 정의 구성 요소는 디렉터리 패키지 내에서 참조 및 사용되는 위치를 알지 못하는 경우가 있으므로 이 경우 위의 상대 경로 URL을 사용하지 않는 것이 좋습니다. 커스텀 컴포넌트를 어떻게 사용하는지 알아야 하고, 컴포넌트를 정의하는 파일(index.vue)의 디렉터리 위치를 알아내기 위해서는 타겟 파일(
applicationContent.vue )의 디렉터리 위치만 알면 된다. 위의 점프 경로: url:/fleetPage/pages/notification/applicationContent?id=${obj.id}