【小程序】使用uni-app搭建小程序環境---路由配置及頁面跳轉獲取參數

路由

uni-app路由全部交給框架統一管理，開發者需要在pages.json里配置每個路由頁面的路徑及頁面樣式，不支持 Vue Router。

范例：

　　

    "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首頁"
            }
        },
        {
            "path": "pages/courseCassify/index",
            "style": {
                "navigationBarTitleText": "分類"
            }
        },
        {
            "path": "pages/learnRecord/index",
            "style": {
                "navigationBarTitleText": "學習"
            }
        },
        {
            "path": "pages/my/index",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }
    ],

 

路由跳轉

uni-app 有兩種路由跳轉方式：使用navigator組件跳轉、調用API跳轉。

 

<template>
    <view>
        <view class="page-body">
            <view class="btn-area">
                <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳轉到新頁面</button>
                </navigator>
                <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
                    <button type="default">在當前頁打開</button>
                </navigator>
                <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
                    <button type="default">跳轉tab頁面</button>
                </navigator>
            </view>
        </view>
    </view>
</template>

 

// navigate.vue頁面接受參數
export default {
    onLoad: function (option) { //option為object類型，會序列化上個頁面傳遞的參數
        console.log(option.id); //打印出上個頁面傳遞的參數。
        console.log(option.name); //打印出上個頁面傳遞的參數。
    }
}

 

url有長度限制，太長的字符串會傳遞失敗，可使用窗體通信、全局變量，或encodeURIComponent等多種方式解決，如下為encodeURIComponent示例。

 

<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>



// navigate.vue頁面接受參數
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

 

注意

• 跳轉tabbar頁面，必須設置open-type="switchTab"