uniapp中组件之间跳转遇到的问题

在谈组件之间的跳转之前，我们先复习下组件和page页的跳转：

组件navar：

<template>
    <view class="content">
        <view>
            <text @click="ToIndex">{{title}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        name:"navar",
        props:{
            title:{              
                type:String,
                default:"标题"
            }
        },
        data() {
            return {
                
            };
        },
        methods:{
            ToIndex(){
                uni.navigateTo({
                    url:'../../pages/sass/index/index'   
                })
            }
        }
    }
</script>

<style lang="scss">
    .content {
        font-size: 30upx;
        color: #ff0000;
    }
</style>

Page页 ：pages/sass/index/index

<template>
    <view>
        我是page页面
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

结果：从组件navar跳转到sass/index/index，是可以实现的。

我们再来看组件之间的跳转：

组件nav代码同上，不再展示；

组件swiper：

<template>
    <view>
        我是swiper组件
    </view>
</template>

<script>
    export default {
        name:"swiper",
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">

</style>

然后在组件nav中我们将 跳转函数换成：

methods:{
          ToIndex(){
               uni.navigateTo({
                    url:'../swiper'      
               })
          }
}
结果：无法跳转
原因：这里不能写相对路径，应该写从根目录开始写 ，即下列所示：

methods:{
          ToIndex(){
               uni.navigateTo({
                    url:'/components/swiper'      
               })
          }
}

这样就能实现跳转了。
通过以上问题显示及解决方式来看，说明：组件之间的跳转时，路径要写在根目录下。