组件内进行页面跳转时路径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}