コンポーネント内でページをジャンプする際のパス 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}