uniapp中組件之間跳轉遇到的問題

本文轉載自查看原文 2021-05-20 00:05 1417

在談組件之間的跳轉之前，我們先復習下組件和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'      
               })
          }
}

這樣就能實現跳轉了。
通過以上問題顯示及解決方式來看，說明：組件之間的跳轉時，路徑要寫在根目錄下。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uniapp中的跳轉傳參 uniapp的組件傳值問題 uniapp中組件傳值 vscode 實現組件之間的跳轉 uniapp-小程序-組件跳轉 uniapp 小程序兼容（開發中遇到）開發中遇到的問題---【堡壘機跳轉打開本地軟件時，沒有反應，怎么辦？】使用vue-router遇到的坑，url不跳轉的問題（beforeEach中沒有調用next()） uniapp中請求接口問題 vue中組件之間的傳值