Things to note about the path URL when jumping pages within the component
Directory Structure
Problem Description
Among them, fleetMessage.vue is a custom component, index.vue is a file that references and uses this component, and applicationContent.vue is the target file for jump; a method is defined in the custom component to jump to the page:
// fleetMessage.vue
methods: {
// 跳转
goto(obj) {
console.log('@@')
uni.navigateTo({
url:`../pages/notification/applicationContent?id=${
obj.id}`
})
}
}
At this time, a relative path is used, starting from the location of the custom component and pointing to the target file application.vue. You will find that the page cannot be jumped, but the console does not report an error and @@ is printed.
Solution
After analysis, the reason is that the custom component is used in the index.vue file, so the jump path URL needs to start with the directory location of the file using the custom component, not the directory location of the custom component itself.
// index.vue
<template>
// 使用自定义组件
<fleetMessage></fleetMessage>
</template>
<script>
import fleetMessage from '../../components/fleetMessage.vue'
export default {
components:{
fleetMessage }
}
</script>
Therefore, the jump path URL needs to be changed to: url: ../notification/applicationContent?id=${obj.id}
At this time, you will find that the page jumps successfully.
Improve ideas
Note: Since custom components sometimes do not know where they will be referenced and used in the directory package, it is recommended not to use the above relative path URL in this case. It is recommended to use an absolute path, so that we no longer need to know how to use the custom component. To determine the directory location of the file that defines the component (index.vue), you only need to know the directory location of the target file (applicationContent.vue);
that is, change the above jump path to: url:/fleetPage/pages/notification/applicationContent?id=${obj.id}