复盘工作-2024-06

2024-06-01

1.js != 和 !==

// == 等于
// 会执行类型转换，尝试使两边的值相等
// 当一个值是null，
// 另一个值是undefined，
// null==undefined 会返回true
// 因为它们都被视为“空”或“无”

// === 严格等于
// 不会进行类型转换
// null和undefined是不同的
// 所以null===undefined返回false

let l1;
 // 我之前的错误的测试写法：
 // console.log('1:' + l1!='');
 // 我预期是先输出序号1，
 // 再输出l1!=''的判断结果
 // 但是
 // 因为运算符+l优先级高于!=，
 // 所以其实我写的测试代码
 // 是先产生了一个字符串
 // 即'1:'+l1
 
 // 我预判是true
 console.log('1:', l1!='');
 // 我预判是true
 console.log('1.1:', l1!=='');
 // 我预判是true
 // 但实际为false
 // 分析：
 // == 等于
 // 会执行类型转换，尝试使两边的值相等
 // 当一个值是null，
 // 另一个值是undefined，
 // null==undefined 会返回true
 // 因为它们都被视为“空”或“无”
 console.log('2:', l1!=null);
 // 我预判是true
 // 分析：
 // === 严格等于
 // 不会进行类型转换
 // null和undefined是不同的
 // 所以null===undefined返回false
 console.log('2.1:', l1!==null);
 // 我预判是false
 console.log('3:', l1!=undefined);
 // 我预判是false
 console.log('3.1:', l1!==undefined);
 
 let l2 = '';
 // 我预判是false
 console.log('4:', l2!='');
 // 我预判是false
 console.log('4.1:', l2!=='');
 // 我预判是true
 console.log('5:', l2!=null);
 // 我预判是true
 console.log('5.1:', l2!==null);
 // 我预判是true
 console.log('6:', l2!=undefined);
 // 我预判是true，
 console.log('6.1:', l2!==undefined);
 
 // 输出undefined
 console.log(l1);

// 输出"1 2 3 4 5"，
// console.log()传递多个参数时，
// 依次输出多个参数，
// 参数之间用空格分隔
console.log(1, 2, 3, 4, 5);
// 输出apple banana orange
console.log('apple', 'banana', 'orange');

// +拼接字符串，最后输出了一个字符串
// 输出applebananaorange
console.log('apple' + 'banana' + 'orange');

 2024-06-02

1.隐藏元素

<div id="btnGroup">
            <button id="btn1">按钮1</button>
            <button id="btn2">按钮2</button>
        </div>
<div class="save-button">
            <button onclick="hideBtnGroup()">隐藏按钮区域</button>
        </div>

<script>
      function hideBtnGroup() {
          // 隐藏元素，点击后效果：
        // 隐藏掉含有两测试按钮的id为btnGroup的div
          $("#btnGroup").hide();
      }
  </script>

2024-06-03

1.js输出时间戳：

// new Date()，一般都加()，表示调用构造方法
let now = new Date();
let timestamp = now.getTime();
console.log('时间戳：', timestamp);

2.js 数组的.find方法和.some方法

let fruits = ['apple', 'banana', 'orange', 'pear', 'banana'];
        for (let i = 0; i < 5000000; i++) {
            fruits.push('water');
        }
        testFind(fruits);
        testSome(fruits);
        
        /* find方法在找到一个元素后，会继续遍历数组直到数组末尾 */
        /* 我一开始写作let arrByFind = fruits.find('banana');报错banana is not a function */
        // 后来改为item => item => { item == 'banana'; };结果为arrByFind为undefined
        // let arrByFind = fruits.find(item => item == 'banana');
        function testFind(fruits) {
            new Promise((resolve, reject) => {
                let arrByFind = fruits.find(item => item == 'banana')
                if (arrByFind) {
                    // .find方法返回：时间戳： 1717431634246
                    console.log('.find方法返回：时间戳：', new Date().getTime());
                    // .find结果arrByFind: banana
                    console.log('.find结果arrByFind:', arrByFind);
                    resolve(true);
                }
            });
        }

        /* 所以这里预期arrByFind是['banana', 'banana'] */
        // console.log('fruits.find: ', arrByFind);
        
        /* some方法在找到一个元素后，会立刻返回true */
        /* 我一开始写作let booleanBySome = fruits.some('banana');报错banana is not a function */
        // let booleanBySome = fruits.some(item => item == 'banana');
        function testSome(fruits) {
            new Promise((resolve, reject) => {
                let booleanBySome = fruits.some(item => item == 'banana');
                if (booleanBySome) {
                    // .some方法返回：时间戳： 1717431634247
                    console.log('.some方法返回：时间戳：', new Date().getTime());
                    // .some结果：booleanBySome:  true
                    console.log('.some结果：booleanBySome: ', booleanBySome);
                    resolve(true);
                }
            });
        }

2024-06-04

1.plsql给oracle建表时，应该是设置主键（然后oracle自动设置的非空约束），而不是手动设置的ID列非空。

2024-06-05

今天内容没有重新敲代码在具体demo中验证，可能存在个别错误。

1.自适应

function calculatePopupWidth() {
    // 这里我一开始复盘时默写错了：let screenWidth = window.width || document.document.clientWidth || document.documentbody.clientWidth;
    // 依次取值（若没有则顺延依次取）：
    // window.innerWidth：浏览器提供的，获取浏览器窗口视口宽度
    // document.documentElement.clientWidth: html的<html>元素的clientWidth属性
    // document.body.clientWidth: html的<body>元素的clientWidth属性
    let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    // 取屏幕宽度的50%，即另外留50%用于左右边距
    // 同时保证最低宽850px，保证不会因小屏而过窄影响显示效果
    let width = Math.max(850, screenWidth * 0.5);
    return width;
}

2.为保证“保存”按钮在富文本右下方：对富文本区域加div便于控制效果；去掉保存按钮的position:fixed从而避免浮动于文档流；对保存按钮所在div样式进行控制，设置margin-top:10px;上边距；设置text-align:right;设置div中元素靠右对齐

<div>
    <textarea></textarea>
</div>
<div style="margin-top: 10px; text-align: right;">
    <button></button>
</div>

3.解决区域仅占页面左侧2/3的区域：将之前设置的div的margin-left改掉。改为width:70% !important;宽占父元素的70%，!important表示覆盖其他所有同名样式属性（无论是内联样式、id选择器、类选择器、属性选择器）；同时margin:0px auto !important;设置上下外边距都为0，设置左右外边距为自动。因为宽度固定了（即70%），且左右外边距自动，就产生了在父容器中左右居中的效果。

.container {
    width: 70% !important;
    margin: 0px auto !important;
}

4.<iframe></iframe>用于在html中嵌入另一个文档的元素。src指定嵌入的文档内容。例如：

<iframe src="https://www.example.com" width="300" height="200"></iframe>

5.let sb = 'zw';$('testTree' + sb)常用于动态生成dom元素选择器

let sb = 'zw';
$('testTree' + sb).xxxx方法

6.request.getParameter('xxx');从request中获取请求参数；request.setAttribute('key',value);向request中设置属性；注意根本没有request.setParameter这方法。解析：请求中的参数，在服务端只能.getParameter来获取。服务端可以通过.setAttribute来进行存储和修改属性，请注意是属性，而不是请求参数。设置属性后，用于后续处理，例如jsp中可以通过EL表达式${xxx}来获取request中的属性。

@RequestMapping("xxx")
public ModelAndView xxx(HttpServletRequest request) {
    // 获取url请求路径参数，形如xxx.do?xxxMethod&fruitName=yyy
    request.getParameter("fruitName");
    request.setAttribute("fruitName");
    return new ModelAndView("aa/bb");
}

后面jsp中就可以el表达式取到

<input value="${fruitName }"></input>

7.jsp里el表达式拼汉字，直接拼即可。无需写什么+，否则反而会报错。

<label>"${fruitName }发货时间"</label>

8.对请求url中的参数进行处理：通过encodeURIComponent函数

let fruitName = '测试水果种类/水果名称';
let url = "xxxController.do?xMethod&fruitName=" + encodeURIComponent(fruitName);

2024-06-06

今天内容没有重新敲代码在具体demo中验证，可能存在个别错误。

1.解决js响应里id选择器选不到值的问题：

在success响应中，默认会从主文档去获取元素。而要获取的id是iframe里的，所以获取不到。

// 默认从当前主文档获取formobj，因为获取不到，导致报undefined
let urlTest = $("#formobj").attr("action");

// 获取iframe里某元素
let urlTest2 = $("#formobj", iframe.document).attr("action");

2.对于框架封装的UI，项目里并没有其代码，怎样调其样式：

先F12里通过检查元素定位到界面上要调整样式的元素，在F12里找到其代码，右击选择“copy element"就可以复制出来这个元素的代码。

这时候很可能元素是没有id的，我们可以通过它的其他属性，用jQuery选择器选择到该元素，包括选择到其父级元素

<!-- 例如对于F12中的如下代码 -->
<span style="display: inline-block; width: 98%;"><span style="vertical-align: middle; display: inline-block; width: 60px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 15px;" title="测试title"> 测试内容：</span><input onkeypress="EnterpmYjQxjlPress(event)" onkeydown="EnterpmYjQxjlPress()" type="text" name="test" class="inuptxt" style="width: 125px" title=""></span>

<script type="text/javascript">
<!-- 获取内层这个span并设置其样式（通过title获取）： -->
$('span[title="测试title"]').css({
    <!-- 元素左对齐 -->
    'text-align': 'left',
    'width': '60px',
    <!-- 左外边距 -->
    'margin-left': '15px'
})

<!-- 获取外层这个span并设置其样式（通过内层span获取其父元素） -->
$('span[title="测试title"]').parent().css({
    'width': '95%'
});

<!-- 获取内层这个input并设置其样式（通过name获取）： -->
$('input[name="test"]').css({
    'width': '87%'
});
</script>

2024-06-07

如下代码未写demo验证，可能存在问题

1.jsp或html文件引入css：（1）css定义时.的后面一定不能跟空格，否则会被认为是两个样式定义，无法识别。（2）css通用放置位置是在WebRoot文件夹下。系统会从这个根路径开始寻找。（3）css里写注释：用/* 注释内容 */

（4）引入：<link rel="stylesheet" type="text/css" href="css/xxx/test.css"> link是一个html元素，用于在当前文档中链接到外部资源。rel是relationship的缩写，代表当前文档和被链接文档之间的关系，这里rel="stylesheet"表示这个链接关联的是一个样式表文件。type定义被链接文档的MIME类型，html5中可以省略，但写上增强可读性。href属性定义了被链接文档的url。

/* webRoot/css/xxx/test.css */
.test-div {
    margin-left: 10px;
}

<!-- link是一个html元素，用于在当前文件中链接到外部资源。 -->
<!-- rel是relationship的缩写，代表当前文档和被链接文档之间的关系，这里rel="stylesheet"表示这个链接关联的是一个样式表文件。 -->
<!-- type定义被链接文档的MIME类型。html5中可以省略，但写上增强可读性。 -->
<!-- href属性定义了被链接文档的url -->
<link rel="stylesheet" type="text/css" href="css/xxx/test.css">

2024-06-13

如下代码未写demo验证，可能存在问题

1.<c:forEach>实现行编辑

<!-- <c:forEach>是JSP标准标签库JSTL里的一个标签，这里用于动态构建html
${penList }是后端传来的列表，
items="${penList }"定义数据源，
var="poVal"定义后续可以用poVal来指列表的某个元素，
varStatus="status"提供了javax.servlet.jsp.jstl.core.LoopTagStatus对象，
可以通过该对象获取当前迭代的状态信息，比如索引（index），
后续可以用status来获取索引index -->
<c:forEach items="${penList}" var="poVal" varStatus="status">
<!-- value="${poVal.id }定义input框的值是元素的id，
name="penList[${status.index }].id"定义input框的name是penList中元素的id -->
<input name="penList[${status.index }].id" type="hidden" value="${poVal.id}"/>

2.使用jquery选择器时，选择器要放到''里面，

// 一定是'.test-class'，而不是.'test-class'
$('.test-class').css({
    'height': '500px'
})

3.let res = JSON.parse(data)

JSON.parse()是Javascript提供的函数，入参是JSON格式的字符串，返回值是一个JavaScript对象。

4.let penName = $('#penName').val();

jquery获取某个dom元素的value属性时，要用.val()。而.val则会获取到这个方法（即val函数）。

5.$('#penName').val('沃尔玛售卖的碳素笔');

jquery对dom元素设置value属性时，要用.val('新的值');

6.html中<button>标签默认type=‘submit’，所以会触发表单提交事件。所以改为使用<input type='button'/>这样就不会触发表单提交事件了（除非在点击事件中手动提交表单）。

7.javascript每分钟执行一次某函数

setInterval设置定时器，每60000毫秒即1分钟，执行一次load方法

function load() {
    // 省略代码
}

setInterval(load, 60000);

8.vue中打开弹窗

<f7-popup ref="TestPop">
            <f7-page>
                <TestPop v-if="isTestPop"></OpinionPop>
            </f7-page>
        </f7-popup>

<script>
    // 这两句是通用代码。
    // 先打开弹窗，再确保组件被渲染到dom中并在弹窗中显示。
    function openTestPop() {
        // 调用framework7的popup的open()方法打开弹窗
        this.$refs.TestPop.open();
        // （在打开弹窗后），设置isTestPop=true，
        // 确保TestPop组件会被渲染到dom中，进而在弹窗中显示
        this.isTestPop = true;
    }
</script>

9.setTimeout是一个全局的javascript函数，用于在指定的毫秒数后执行代码

// 1秒后跳转到某页面
window.setTimeout(() => {  
    this.$f7router.navigate('/test/TestList');  
}, 1000);

2024-06-19

1.oracle数据库varchar类型存储汉字分析

oracle中varchar2和char字段的长度默认都是按字节（byte）进行的，而不是字符。

一个汉字需要用几个字节来表示取决于字符编码。

utf-8使用1~4个字节来表示一个字符。对于常用的汉字，utf8使用3个字节来表示一个汉字。

当定义字段为varchar(100)时，同时我们数据库用的utf8编码，则最多存储33个汉字。

2024-06-20

1.实现触发某按钮的点击事件

<f7-button id="practice-id1" @click="alert1()">验证</f7-button>
<script>
    mounted: {
        // 一开始我写的是错的：this.getElementById('practice-id1').click();
        document.getElementById('practice-id1').click();    
    }
    methods: {
        alert1() {
            alert(1);
        }    
    }
</script>

2024-06-21

1.js禁用按钮，并（在按钮已有样式的前提下）将按钮置灰

cursor [ˈkɜ:sə(r)] 光标

<head>
     <script type="text/javascript">
         // $(document).ready(function(){
         //     document.getElementById('practice-button').diasbled = true;
         // })
         /*等价于*/
         $(function(){
             document.getElementById('practice-button').diasbled = true;
         })
     </script>
     <style>
            .practice-button[disabled]{
                background-color: #ccc;
                color: #ccc;
                /* 我一开始写的是错的：none-clicked */
                cursor: not-allowed;
            }
    </style> 
 </head>
<body>
    <input id="practice-button" type="button" class="practice-button" value="验证保存">
</body>

2024-06-22

1.idea更新git代码后，myeclipse里刷新项目后，无需启动（或重启）Tomcat，直接导出war包即可。就是说不需要考虑什么编译之类的。

2.jquery实现在DOM树加载完后再执行某段代码

$是jquery的一个全局函数，也被称为“jQuery对象”或“jQuery构造函数”。用于选择dom元素或执行其他jQuery方法。

document是一个代表整个html文档的dom对象。

.ready()是jQuery提供的一个方法，用于绑定一个函数，当dom完全加载完后（而不是整个页面，包括图片、CSS等），就会执行该函数。

function(){}是匿名函数，当dom加载完成后，jQuery会自动调用该函数。可以在函数内编写javascript代码。

$(document).ready(function(){
    // do something
})

// 或者缩写：
$(function(){
    // do something
})

3.war：web application archive的缩写，web应用程序存档文件。war是sun公司提出的web应用程序格式。用于将web应用程序打包成一个文件，便于分发、部署和管理。

4.在hql中拼接sql对比时间。oracle数据库。

用oracle的to_date()函数。后面的格式化字符串，oracle中就是这么用的：记住就行：yyyy代表年，mm代表月，dd代表日。hh24表示24小时制的小时。mi指minute。ss代表second秒。yyyy-mm-dd hh24:mi:ss。

select t.create_date, t.* from smi t where t.create_date > to_date('2024-06-20 08:30:00', 'yyyy-mm-dd hh24:mi:ss');

2024-06-23

1.framework7路由传参，options参数

this.$f7router.navigate('/test/'+this.handleData.id+'/2/', {
    props: {
        workOrder: this.handleData
    }
});

2.关于样式文件的.scss格式

.scss是sass（syntactically /sɪnˈtæk.tɪ.kəl.i/ awesome /ˈɔː.səm/ stylesheets的缩写）的一个语法，而sass是css的预处理器。sass提供了css本身不具备的特性和功能，提高了代码的可维护性和可重用性。

syntactically /sɪnˈtæk.tɪ.kəl.i/ 句法上

awesome /ˈɔː.səm/ 很好的，令人惊叹的

2024-06-27

1.service层当方法入参很多时，且他们本来就是期望要在该方法中对实体（例如SysMessageInfoEntity）的属性进行赋值。我之前的写法：13个参数全列出来，不好。

1.1这种情况需要封装DTO。便于后端各层之间传参调用。调用方给dto设置值，该方法从dto取值。

1.2关于为什么要新定义dto而不是直接用数据库实体类：实体类通常与数据库表对应，可能包含持久化逻辑（如JPA注解），将它们用于层间数据传输会导致不必要的复杂性。

1.2.1JPA（Java persistence api）

1.2.2@Entity是一个JPA注解，它告诉JPA框架这个类是一个实体类，应被映射到数据库的一个表

1.2.3@Table(name="SYS_MESSAGE_INFO", schema="")也是一个JPA注解，其提供有关映射到数据库表的更多详细信息

1.2.4implements java.io.Serializable：这个接口用来确保实体类是可以序列化的，以便它们可以被存储到注入HTTP会话或缓存这样的地方，或者在网络请求中被发送。

1.2.5创建DTO时不应该包含这些与持久化相关的注解和接口。dto应该是一个简单的Java类，包含属性和get、set方法。

1.3关于dto放到entity包里，还是单独建包：应该单独建包。保持代码组织性和可读性。

2.定义list

List<SysMessageInfoEntity> msgs = new ArrayList<SysMessageInfoEntity>();
        // jdk7定义的菱形操作符简化泛型定义
        List<SysMessageInfoEntity> msgs2 = new ArrayList<>();

2024-06-28

1.chrome浏览器调试，突然debugger无法停掉了（但其他浏览器能正常在debugger处停掉），解决方法：

https://blog.csdn.net/qq_45024094/article/details/134964140 方法二可解决

2.vue父子组件传值、父组件调用子组件方法以及子组件触发父组件监听事件父组件进行处理

父组件（Business.vue）：

<template>
    <!-- 通过v-if在dom中渲染子组件 -->
    <button @click="openFruitNamePop()">打开组件：录入水果名</button>
    <!-- 父组件调用子组件中的方法 -->
    <button @click="callCHildMethod()">调用子组件方法</button>
    <!-- 父子组件传值 -->
    <button @click="callNameFromParent()">改变父组件传参值</button>

  <!-- 父组件监听子组件触发的事件： -->
  <!-- 一开始我写的不对：@handleName="handleName()"
  分析：@handleName是一个监听器，
  用于监听从子组件触发的handleName事件，
  当子组件调用$emit('handleName', this.fruitName)时，
  它会传递一个参数（即this.fruitName）给父组件
  @handleName="handleName"，里面不能加()，
  因为它只是告诉vue：
  ”当handleName事件从fruit-name-pop组件触发时，
  调用handleName方法“，
  当子组件触发handleName事件
  并传递this.fruitName作为参数时，
  vue会自动将这个参数传递给handleName方法。
  因此在父组件handleName方法的定义中，
  name参数就会是子组件this.fruitName的值-->
  <fruit-name-pop ref="fruitNamePop" v-if="isFruitNamePopOpen"
                  :name="nameFromParent" @handleName="handleName"></fruit-name-pop>
</template>

<script>
import fruitNamePop from '@/views/common/FruitNamePop.vue'
export default {
  name: "Business.vue",
  components: { fruitNamePop },
  data() {
    return{
      isFruitNamePopOpen: false, // 是否显示水果名称组件
      nameFromParent: 'apple'
    }
  },
  methods: {
    // 通过v-if在dom中渲染子组件
    openFruitNamePop() {
      this.isFruitNamePopOpen = true;
    },
    // 当监听到子组件触发handleName事件后，
    // 执行父组件中的该方法
    handleName(name) {
      debugger;
      alert('name from child: ' + name);
    },
    // 父组件调用子组件中的方法
    // 分析：我一开始未渲染子组件时，
    // 测试调用子组件方法报错的原因：
    // 由于用v-if来控制子组件是否展示，
    // 所以调用子组件方法时，必须是子组件已被渲染到dom中
    // 否则没展示子组件时直接调用子组件方法，会报错：
    // TypeError: Cannot read properties
    // of undefined (reading 'alertName')
    callCHildMethod() {
      if (this.$refs.fruitNamePop) {
        this.$refs.fruitNamePop.alertName();
      }
    },
    // 改变父组件要传给子组件的值
    callNameFromParent() {
      this.nameFromParent = 'banana';
    },
  }
}
</script>

子组件（FruitNamePop.vue）：

<template>
  <div>
    <span>请输入水果名：</span>
    <!-- 我一开始写的是：<input name="fruitName" id="fruitName"></input>
     这样input标签不会进行数据绑定到fruitName上 -->
    <input v-model="fruitName" name="fruitName" id="fruitName"></input>
    <!-- 从子组件触发父组件监听事件 -->
    <button @click="submitName()">提交</button>
  </div>
</template>

<script>
export default {
  name: "FruitNamePop",
  props: ['name'],
  /**
   * 一开始我写错了：data: {} 这是错误的
   * 这种错误的写法是定义了一个对象
   *
   * 正确的写法：data应该是一个函数
   * 在vue中data必须是一个
   * 返回初始数据对象的函数
   * 因为当组件的实例被创建时，
   * 这个data函数会被调用
   *
   * data() {
   *   return {
   *     fruitName: ''
   *   }
   * }
   */
  data() {
    return {
      fruitName: ''
    }
  },
  /**
   * 我一开始写错了：mounted: {}这是错误的，
   * 这种错误的写法是定义了一个对象
   *
   * 正确写法：
   * mounted() {} 是钩子函数，而不是一个对象
   */
  mounted() {
    debugger
    this.fruitName = name;
  },
  /**
   * 如何理解method: {}
   * method是组件选项对象的一个属性，
   * 它用于定义组件中可复用的方法
   *
   * method的值是一个对象，
   * 其中每个属性都是一个方法名，
   * 其对应的值是一个函数
   */
  methods: {
    // 该方法用于供
    //    父组件调用
    alertName() {
      let testName = this.fruitName;
      debugger;
      alert(this.fruitName);
    },
    // 从子组件触发父组件监听事件
    submitName() {
      debugger;
      this.$emit('handleName', this.fruitName);
    }
  },
  watch: {
    // 监听父组件传值变化
    name(newVal, oldVal){
      debugger;
      if (newVal != null) {
        this.fruitName = this.name;
      }
    }
  }
}
</script>

<style scoped>

</style>

2024-06-29

1.MyEclipse里Tomcat不显示已部署的项目，即无法右击Tomcat进行移除项目（当然也无法重新部署），解决方法：

直接打开进行部署的这个Tomcat的webapp文件夹（在文件资源管理器中），然后删掉项目文件夹；然后把该Tomcat的work文件夹下的内容删掉。然后就可以到myeclipse中对该Tomcat添加项目进行部署了。

2.framework7 路由跳转时url传参，以及props选项传参

路由定义：common.js：

import CityFruitPage from "@/views/workTicket/CityFruitPage";
// 路由url参数传参
    {
        path: '/sale/fruitInfo/:provinceCode/:cityCode/',
        component: CityFruitPage
    }

要跳转到的目的地页面：CityFruitPage.vue：

<template>

</template>

<script>
export default {
  name: "CityFruitPage",
  props: ['fruitData'],
  mounted() {
    debugger;
    // 在组件内部通过$f7route属性访问路由参数
    let provinceCode = this.$f7route.params.provinceCode;
    let cityCode = this.$f7route.params.cityCode;
    alert('路由url传参provinceCode: ' + provinceCode);
    alert('路由url传参cityCode: ' + cityCode);
    if (this.fruitData) {
      let name = this.fruitData.name;
      let color = this.fruitData.color;
      alert('路由options参数封装props传参：fruitData.name：' + name);
      alert('路由options参数封装props传参：fruitData.color：' + color);
    }
  }
}
</script>

<style scoped>

</style>

跳转的原页面（跳转前的页面）：Business.vue：

<!-- 验证页面间跳转 -->
                <button @click="goCityFruitPage()">跳转“城市水果”页面</button>
<script>
    methods: {
        // 跳转“城市水果”页面
          goCityFruitPage() {
            debugger;
            let provinceCode = 'ShanDong';
            let cityCode = 'YanTai';
            let fruitInfo = {
              name: 'apple',
              color: 'red'
            }
            // 路由url参数传参
            // provinceCode、cityCode
            // 同时将props作为第二个参数options传递
            this.$f7router.navigate(
                '/sale/fruitInfo/'
            + provinceCode + '/'
            + cityCode + '/',
                {
                  props: {
                    fruitData: fruitInfo
                  }
                })
          },
    }
</script>

2024-06-30

1.如何理解$f7router.navigate来跳转。以及$f7route.params来获取路由参数

在F7里，$f7router和$f7route是两个不同的对象。

1.1$f7router：

1.1.1$f7router是f7的路由管理器对象。它提供了用于导航、路由配置和路由相关事件监听的方法

1.2$f7route：

1.2.1$f7route对象则代表了当前的路由状态。它包含了关于当前页面的信息，如页面的URL、路由参数等。

1.2.2当页面加载或导航到新的页面时，f7会更新$f7route对象以反映当前的路由状态

1.2.3可以通过$f7route.params访问当前页面的路由参数。

1.3总结：

1.3.1$f7router用于路由管理和导航

1.3.2$f7route代表了当前的路由状态，并提供了访问当前页面路由参数的方法。