[Applet] Use uni-app to build applet environment --- routing configuration and page jump to get parameters

routing

uni-appThe routing is completely managed by the framework. The developer needs to configure the path and page style of each routing page in pages.json , which is not supported  Vue Router.

example:

　　

    "pages": [ // The first item in the pages array represents the application startup page, reference: https://uniapp.dcloud.io/collocation/pages 
        {
             "path": "pages / index / index" ,
             "style" : {
                 "navigationBarTitleText": "Home"
            }
        },
        {
            "path": "pages/courseCassify/index",
            "style": {
                "navigationBarTitleText": "分类"
            }
        },
        {
            "path": "pages/learnRecord/index",
            "style": {
                "navigationBarTitleText": "学习"
            }
        },
        {
            "path": "pages/my/index",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }
    ],

 

Routing jump

uni-app There are two routing jump methods: jump using the navigator component and calling API jump.

 

<template>
    <view>
        <view class="page-body">
            <view class="btn-area">
                <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type = "default"> Jump to a new page </ button>
                </navigator>
                <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
                    <button type = "default"> Open on current page </ button>
                </navigator>
                <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
                    <button type = "default"> Jump tab page </ button>
                </navigator>
            </view>
        </view>
    </view>
</template>

 

// The navigate.vue page accepts the parameter 
export default {
    onLoad: function (option) { // option is of type object, will serialize the parameters passed on the last page 
        console.log (option.id); // print out the parameters passed on the last page. 
        console.log (option.name); // Print out the parameters passed on the previous page. 
    }
}

 

There is a limit on the length of url. If the string is too long, it will fail to be passed. You can use form communication , global variables , or encodeURIComponentother methods to solve it encodeURIComponent.

 

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



// The navigate.vue page accepts the parameter 
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

 

note

• To jump to the tabbar page, open-type = "switchTab" must be set