How to pass parameters in uniapp

With the popularity of mobile applications and the changing needs of users, more and more developers choose to use uniapp for development. However, an important issue that arises is how to pass parameters between different pages. In this article, we will introduce in detail how to pass parameters in uniapp.

1. Pass parameters through URL

URL is a way to describe the location of a file in a computer network. In uniapp, parameters can be passed via URL. In web development, parameters can be passed through query string. There are two ways to pass URL parameters in uniapp: route jump and h5 page jump:

1. Route jump

Uniapp provides some routing-related APIs, among which , the two APIs uni.navigateTo and uni.redirectTo can carry parameters when jumping. When jumping, parameters can be passed to the URL in the form of objects and represented in the form of query strings. As shown below:

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=apple'
})

In the page being jumped, the passed parameters can be accessed through this.$route.query object. As shown below:

export default {
  mounted() {
    console.log(this.$route.query.id) // 123
    console.log(this.$route.query.name) // 'apple'
  }
}

It should be noted that the parameters passed through route jump will be saved in the history of the navigation bar. Therefore, you can return to the previous page through the return operation and carry the parameters.

2.h5 page jump

In uniapp, you can obtain the query string and parameters in the URL through location.search, for example:

var url = window.location.search; // ?id=123&name=apple
var obj = {};
if (url.indexOf("?") != -1) {
  url = url.substr(1); // id=123&name=apple
  var arr = url.split("&");
  for(var i = 0; i < arr.length; i++) {
    var tmp = arr[i].split("=");
    obj[tmp[0]] = tmp[1];
  }
}
console.log(obj.id); // 123
console.log(obj.name); // 'apple'

Things to note Yes, when jumping in an h5 page, the URL needs to be processed manually.

2. Pass parameters through Vuex

In uniapp, you can use Vuex for state management, so we can also pass parameters through Vuex.

1. Create a store in the page

In each page, we need to first create a store to pass parameters. As shown below:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    id: '',
    name: ''
  },
  mutations: {
    SET_ID(state, id) {
      state.id = id
    },
    SET_NAME (state, name) {
      state.name = name
    }
  }
})

export default store

Introduce store into the page as follows:

import store from '@/store/index'

2. Pass parameters in the page

Where parameters need to be passed In the page, parameters can be passed to the store by submitting mutations. As shown below:

export default {
  methods: {
    handleClick() {
      this.$store.commit('SET_ID', '123')
      this.$store.commit('SET_NAME', 'apple')
    }
  }
}

After submitting the mutation, the corresponding state in the store is updated.

3. Get parameters in the page

In the page where parameters need to be obtained, the parameters stored in the store can be obtained through the $store.state object. As shown below:

export default {
  mounted() {
    console.log(this.$store.state.id) // 123
    console.log(this.$store.state.name) // 'apple'
  }
}

It should be noted that using Vuex for parameter passing requires the introduction of Vuex, and a store needs to be created in each page.

Summary

In uniapp, we can pass parameters through URL and Vuex. For simple parameter passing, we can choose to use URL to pass parameters, and can choose route jump or h5 page jump according to the specific situation. For complex scenarios, we can choose to use Vuex for parameter passing, but we need to pay attention to creating a store in each page. No matter which method is used, the choice needs to be based on actual needs.

The above is the detailed content of How to pass parameters in uniapp. For more information, please follow other related articles on the PHP Chinese website!