uniapp中组件之间跳转遇到的问题
在谈组件之间的跳转之前，我们先复习下组件和page页的跳转：
组件navar：
1 <template> 2 <view class="content"> 3 <view> 4 <text @click="ToIndex">{{title}}</text> 5 </view> 6 </view> 7 </template> 8 9 <script> 10 export default { 11 name:"navar", 12 props:{ 13 title:{ 14 type:String, 15 default:"标题" 16 } 17 }, 18 data() { 19 return { 20 21 }; 22 }, 23 methods:{ 24 ToIndex(){ 25 uni.navigateTo({ 26 url:'../../pages/sass/index/index' 27 }) 28 } 29 } 30 } 31 </script> 32 33 <style lang="scss"> 34 .content { 35 font-size: 30upx; 36 color: #ff0000; 37 } 38 </style>
Page页 ：pages/sass/index/index
1 <template> 2 <view> 3 我是page页面 4 </view> 5 </template> 6 7 <script> 8 export default { 9 data() { 10 return { 11 12 } 13 }, 14 methods: { 15 16 } 17 } 18 </script> 19 20 <style> 21 22 </style>
结果：从组件navar跳转到sass/index/index，是可以实现的。
我们再来看组件之间的跳转：
组件nav代码同上，不再展示；
组件swiper：
1 <template> 2 <view> 3 我是swiper组件 4 </view> 5 </template> 6 7 <script> 8 export default { 9 name:"swiper", 10 data() { 11 return { 12 13 }; 14 } 15 } 16 </script> 17 18 <style lang="scss"> 19 20 </style>
然后在组件nav中我们将 跳转函数换成：
methods:{
ToIndex(){
uni.navigateTo({
url:'../swiper'
})
}
}
结果：无法跳转
原因：这里不能写相对路径，应该写从根目录开始写 ，即下列所示：
methods:{
ToIndex(){
uni.navigateTo({
url:'/components/swiper'
})
}
}
这样就能实现跳转了。
通过以上问题显示及解决方式来看，说明：组件之间的跳转时，路径要写在根目录下。
