Design and development practice of UniApp to implement route management and page jump

UniApp is a cross-platform application development framework based on Vue.js, which can be written once and run on multiple terminals. In UniApp, implementing routing management and page jumps is a very common requirement. This article will discuss the design and development practices of routing management and page jumps in UniApp, and give corresponding code examples.

1. UniApp routing management

In UniApp, routing management mainly includes two aspects: routing configuration and routing jump. Below we will introduce these two aspects respectively.

1. Routing configuration

The routing configuration of UniApp is mainly performed in the pages.json file of the project. In the pages.json file, you can configure the page path, page name, page style and other information. An example is as follows:

{
  "pages": [
    {
      "path": "pages/home/home",
      "name": "home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/login/login",
      "name": "login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    }
  ]
}

In the above example, we have defined two pages: home and login. The path field represents the path of the page, the name field represents the page name, and the style field represents the page style. Can be configured according to actual needs.

2. Route jump

Route jump in UniApp is implemented through the uni.navigateTo or uni.redirectTo method. The uni.navigateTo method is to retain the current page, jump to a page within the application, and return to the previous page through uni.navigateBack. uni.redirectToThe method is to close the current page and jump to a page within the application. The example is as follows:

// 在某个页面的点击事件中跳转到home页面
uni.navigateTo({
  url: '/pages/home/home'
});

// 在某个页面的点击事件中跳转到login页面
uni.redirectTo({
  url: '/pages/login/login'
});

In the above example, routing can be implemented by calling the uni.navigateTo or uni.redirectTo method and passing in the path of the target page. Jump. Different methods can be used in different situations as needed.

2. Design and development practice of UniApp page jump

In actual development, we may need to jump from one page to another and pass some parameters. Below we will introduce how to implement page jump with parameters in UniApp.

1. Page parameter passing

In UniApp, page parameter passing can be done through uni.navigateTo or uni.redirectTo This is achieved by passing parameter objects in the method. An example is as follows:

// 在某个页面的点击事件中跳转到另一个页面，并传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=test'
});

In the above example, parameters can be passed by adding parameters to the URL parameters of the target page. In the target page, the passed parameters can be obtained through the uni.getLaunchOptionsSync().query method. An example is as follows:

export default {
  onLoad(query) {
    console.log(query.id); // 输出1
    console.log(query.name); // 输出test
  }
}

In the onLoad life cycle function of the target page, the passed parameters can be obtained through the query parameter.

2. Page receiving parameters

In some cases, it may be necessary to achieve communication between pages through page jumps. For example, jump from the login page to the home page and display user information on the home page. Below we will introduce how to implement page communication in UniApp.

First, define a global variable in the login page to store user information. An example is as follows:

// 登录成功后保存用户信息
uni.setStorageSync('userInfo', {
  id: 1,
  name: 'test'
});

Then, obtain user information through the uni.getStorageSync method on the homepage. An example is as follows:

export default {
  data() {
    return {
      userInfo: {}
    };
  },
  onLoad() {
    // 获取用户信息
    this.userInfo = uni.getStorageSync('userInfo');
  }
}

In the above example, the stored user information is obtained by calling the uni.getStorageSync method, and then assigned to the userInfo variable. When the page loads, user information can be obtained and related operations can be performed.

Summary:

Through the introduction of this article, we have learned about the design and development practices of routing management and page jumps in UniApp. Route configuration and route jump can be completed in the pages.json file and the uni.navigateTo or uni.redirectTo method. Communication between pages can be achieved by passing parameters during page jumps. I hope the content of this article will be helpful to everyone in routing management and page jumps in UniApp development.

The above is the detailed content of Design and development practice of UniApp to implement route management and page jump. For more information, please follow other related articles on the PHP Chinese website!