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‘      
               })
          }
}
这样就能实现跳转了。
通过以上问题显示及解决方式来看,说明:组件之间的跳转时,路径要写在根目录下。

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

上一篇:Photoshop颜色出现比较大的偏差,偏色严重,显示器配置文件2351似乎有问题


下一篇:Binder机制,从Java到C (9. IPC通信过程)