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'      
               })
          }
}

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