[アプレット] uni-appを使用してアプレット環境を構築---ルーティング構成とページジャンプでパラメータを取得

ルーティング

uni-appルーティングはフレームワークによって完全に管理されているため、開発者はpages.jsonで各ルーティングページのパスとページスタイルを構成する必要がありますが、これはサポートされていません  Vue Router。

例：

　　

    "pages"：[ // pages配列
の最初の項目は、アプリケーションの起動ページを表します。参照：https://uniapp.dcloud.io/collocation/pages         {
             "path"： "pages / index / index" 、
             "style" ： {
                 "navigationBarTitleText"： "Home" 
            } 
        }、
        {
             "path"： "pages / courseCassify / index" 、
             "style" ：{
                 "navigationBarTitleText"： "Classification" 
            } 
        }、
        {
             "path"： "pages / learnRecord / index " 、
             "スタイル " ：
                { "navigationBarTitleText"： "学習" 
            } 
        }、
        {
             "path"： "pages / my / index" 、
             "style" ：{
                 "navigationBarTitleText"： "我的" 
            } 
        } 
    ]、

 

ルーティングジャンプ

uni-app 2つのルーティングジャンプメソッドがあります。ナビゲーターコンポーネントを使用したジャンプと、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 > 
</テンプレート>

 

// navigate.vueページはパラメーターの 
エクスポートのデフォルトを受け入れます{ 
    onLoad：function（option）{ // オプションはオブジェクトタイプであり、前のページで渡されたパラメーターをシリアル化します 
        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：関数（オプション）{ 
    const item = JSON.parse（decodeURIComponent（option.item））; 
}

 

注目

• タブバーページにジャンプするには、open-type = "switchTab"を設定する必要があります