uni-app routing configuration usage and page jump parameter transfer

uni-app routing configuration usage and page jump parameter transfer

uni-app routing configuration usage and page jump parameter transfer

---

---

foreword

Routing configuration usage and page jump parameter transfer of UNI-APP learning series

---

1. Component route jump parameter transfer

• Component Routing Jump

  • Example:

          <navigator
            class="title"
            url="/pages/about/index"
            open-type="navigate"
            hover-class="navigator-hover"
            >{
            
            {
            
             title }}</navigator>
    
    

  • Routing parameters:

      <navigator
            class="title"
            url="/pages/about/index?title=reboertTeacher"
            open-type="navigate"
            hover-class="navigator-hover"
            >{
            
            {
            
             title }}</navigator>
    

  • Receive parameters:

    import {
            
             onLoad } from "@dcloudio/uni-app";
    import {
            
             ref } from "vue";
    const title = ref("");
    onLoad((options) => {
            
            
      console.log(options?.title);
      title.value = options?.title;
    });
    

    The execution effect is shown in the figure below
    
    

2. Functional routing jump parameter passing

• Functional routing jump

  • Example:

    uni.navigateTo({
            
            
      url: '/pages/index/index'
    })
    

  • Routing parameters:

    # 传递参数
    
    uni.redirectTo({
            
            
        url: "/pages/index/index?aboutTitle=" + aboutTitle.value,
      });
    

  • Receive parameters:

    # 接受参数
    onLoad((option) => {
            
            
      aboutTitle.value = option?.aboutTitle;
    });
    

    The execution effect is shown in the figure below
    
    

• The problem of passing parameters

• The url value has a length limit, if the string is too long, the delivery will fail

• solve

  • Global custom events via uniapp
    • https://uniapp.dcloud.net.cn/tutorial/page.html#emit
  • Handled by the global state management library
    • beans
    • vuex

---

Summarize

The above is what I want to talk about today. This article introduces all the content of the uni-app routing configuration and page jump parameter transfer of the UNI-APP learning series. I will continue to develop and explain the UNI-APP framework based on VSCode. If you like it, please Click Follow, and the tutorial on using the UNI-APP framework will continue to be updated.