How to implement page jump and transfer value in uniapp

With the development of the mobile Internet, APP development has gained certain popularity. There are many technical difficulties in APP development, among which page jumps and parameter transfer are one of the technologies that must be mastered. As a multi-terminal development framework, uniapp has a simpler and more convenient implementation of page jumps and value transfers. This article will focus on the method of jumping and passing values ​​on the uniapp page.

1. Uniapp page jump

There are two ways to jump the uniapp page. One is to jump to the page through the tab bar at the bottom, and the other is to jump to the page through code. change.

1. Page jump through the bottom tab bar

In the uniapp framework, page jump can be achieved through the built-in bottom tab bar of uniapp. Configure the bottom tab bar in the pages.json file, and add the page path to be jumped in the tab bar to achieve page jump.

The following is a simple pages.json file to configure the code for the bottom tab bar:

{
  "pages": [
    //tab栏页面
    {
      "path": "pages/index/index",
      "name": "index",
      "iconPath": "static/img/tab-home.png",
      "selectedIconPath": "static/img/tab-home-selected.png"
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "iconPath": "static/img/tab-mine.png",
      "selectedIconPath": "static/img/tab-mine-selected.png"
    }
  ],
  "globalStyle": {
    "navigationBarTitleText": "uni-app"
  },
  "tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#333",
    "selectedColor": "#007aff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/img/tab-home.png",
        "selectedIconPath": "static/img/tab-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/img/tab-mine.png",
        "selectedIconPath": "static/img/tab-mine-selected.png"
      }
    ]
  }
}

2. Implement page jump through code

Requirements for page jump through code Use the uni.navigateTo and uni.redirectTo methods provided by the uniapp framework. The former keeps the current page and jumps to a certain page in the application, while the latter closes the current page and jumps to a certain page in the application.

The following is a sample code for page jump through code:

//保留当前页面，并跳转到某个页面
uni.navigateTo({
    url: 'pages/detail/detail?id=123'
});

//关闭当前页面，并跳转到某个页面
uni.redirectTo({
    url: 'pages/login/login'
});

//返回上一页面
uni.navigateBack();

2. Passing values ​​​​on the uniapp page

In some scenarios, we need to transfer data from a page Passed to another page. For uniapp page value transfer, two common methods on the front end are often used: URL parameter transfer and Vuex state management.

1.URL parameter passing

In uniapp, it is also common to use URL parameter passing. We can splice the data that needs to be passed as parameters when jumping to the target page. On the URL address, and then get it through the $Route object in the target page.

The following is a simple example code for passing URL parameters:

//Jump to the target page and pass the id as a parameter
uni.navigateTo({
url : '/pages/detail/detail?id=12'
});

//Get parameters in the target page
export default {
data () {

return {
  id: ''
}

},
onLoad (options) {

this.id = options.id

}
}

2.Vuex状态管理

另一种方式是使用Vuex状态管理。通过Vuex将数据存储在全局store对象中，从而实现多个页面间数据的共享。

下面是一个Vuex状态管理的示例代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: 'uniapp'
  },
  mutations: {
    setName (state, name) {
      state.name = name;
    }
  }
});

export default store;

//需要传递数据的页面
import { mapState } from 'vuex';

export default {
  data() {
    return {
      inputName: ''
    };
  },
  methods: {
    setName() {
      this.$store.commit('setName', this.inputName);
    }
  }
};

//需要获取数据的页面
import { mapState } from 'vuex';

export default {
  computed: mapState({
    name: state => state.name
  })
};

In the above code, a global store object is first defined and a state is defined Variables and a mutations method for updating data in state. When the page that needs to transfer data needs to modify the data, call the mutations method to update the data in the state. When the page that needs to obtain data needs to obtain data, the mapState method is called through the calculated attribute to obtain the data in the state.

Summary:

The above are two methods for uniapp page jump and value transfer, URL parameter passing and Vuex state management. During the application development process, the appropriate method should be selected according to business needs. Perform page jumps and data transfer to achieve efficient, stable and maintainable applications.

The above is the detailed content of How to implement page jump and transfer value in uniapp. For more information, please follow other related articles on the PHP Chinese website!