一个小程序组件内定义页面跳转方法的注意事项

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