Wechat applet navigator component pass value, page pass value

Recently, I participated in the development of a WeChat applet project and needed to transfer the information of a certain module under one page to another page. Through checking the information, it can be done with the navigator component. Write the record of this article, hoping to help friends in need.

Need specific description

This is a page for students to browse homework/exams and submit homework/exams.
Here, students can see all the assignments, including those that have not yet been submitted and those that have already been submitted. Of course, each job is rendered in a separate box.
A job (box) contains a lot of information. For example, which teacher assigned, what chapter homework, what is the start and end time, what is the content of the homework and so on.
Product design requires a new "job details" page. That needs to transfer the information of each box to a new page.
Insert picture description here

Code

url is the link of the new page
;? After the data to be transmitted, there are multiple data with & connection.

<navigator class="background"
          url='../studyHomeworkDetails/studyHomeworkDetails?homeworkId={
     
     {homeworklist.homeworkId}}&teacherName={
     
     {homeworklist.teacherName}}&hasBeenSubmit={
     
     {homeworklist.hasBeenSubmit}}&homeworkChapter={
     
     {homeworklist.homeworkChapter}}&homeworkTitle={
     
     {homeworklist.homeworkTitle}}&homeworkContent={
     
     {homeworklist.homeworkContent}}&homeworkPicture={
     
     {homeworklist.homeworkPicture}}&homeworkSubmitContent={
     
     {homeworklist.homeworkSubmitContent}}&homeworkSubmitPicture={
     
     {homeworklist.homeworkSubmitPicture}}&homeworkStartTime={
     
     {homeworklist.homeworkStartTime}}&homeworkEndTime={
     
     {homeworklist.homeworkEndTime}}'>
          <!-- 用navigator来传递数据，点击不同作业，传输相应的数据 -->
          <!-- 传递作业id,老师名称，提交情况，作业章节，作业题目，作业内容，作业图片，提交内容，提交图片，开始时间，截至时间 -->
</navigator>

The onLoad function under the new page uses setData to assign options.data to the value of the new page.

 /**
   * 生命周期函数--监听页面加载
   */
  // 从上级页面获取作业的详细信息，学生可以浏览阅读
  // 学生提交作业，通过表单，修改homeworkSubmitContent,homeworkSubmitPicture和hasBeenSubmit
  onLoad: function (options) {
    
    
    this.setData({
    
    
      homeworkId: options.homeworkId,
      teacherName: options.teacherName,
      hasBeenSubmit: options.hasBeenSubmit,
      homeworkChapter: options.homeworkChapter,
      homeworkTitle: options.homeworkTitle,
      homeworkContent: options.homeworkContent,
      homeworkPicture: options.homeworkPicture,
      homeworkSubmitContent: options.homeworkSubmitContent,
      homeworkSubmitPicture: options.homeworkSubmitPicture,
      homeworkStartTime: options.homeworkStartTime,
      homeworkEndTime: options.homeworkEndTime
    })
  },

final effect

Click on an assignment to jump to the "job details". From here, we can view the details of the selected job!
Insert picture description here