vite基础学习笔记：14.路由跳转（二）携带query参数

说明：自学做的笔记和记录，如有错误请指正

1. 路由跳转（携带query参数）

（1）第一层路由（点击卡片路由跳转至新页面-携带query参数）

知识点：

query传参对应的是path和query，参数会以键值对的形式添加到URL的查询字符串中

以上代码运行：点击卡片后跳转到‘' /hospital/register?hoscode=1000_13'’，其中“1000_13”为对应的医院编码

（2）第二层路由（点击左侧导航栏路由跳转显示在数据栏-携带query参数-第一层取参

知识点：

模板取参： $route.query.hoscode

 显示如下：

2. 数据显示 (调用pinia中方法)

（1）在store文件夹中创建医院数据仓库文件 hospital.ts

（2）组件挂载完毕，通知数据仓库调用方法，获取数据

（3）界面显示数据

①界面显示代码-template

显示如下：

 ②界面显示代码-template

  界面显示代码-script

知识点一：通过querySelector / querySelectorAll获取元素通过querySelector / querySelectorAll获取元素

①对于单个元素标签的获取，使用querySelector

②对于多个元素标签的获取，使用querySelectorAll，返回值是一个数组

如下：获取所有class="cur"的元素

<template>        
    <div  v-for="item in hospitalStore.hospitaldepartment">
       <h1 class="cur">
            {{ item.depname }}
       </h1>
    </div>
</template>

<script setup lang="ts">
    let allH1 = document.querySelectorAll(".cur");
</script>

知识点二：scrollIntoView（）滚动元素的父容器，使被调用 scrollIntoView()的元素对用户可见

element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数属性如下： 

参数[可选]	说明
behavior	定义过渡动画，默认为"auto" auto：表示没有平滑的滚动动画效果 smooth：表示有平滑的滚动动画效果
block	定义垂直方向的对齐，默认为"center" start：表示顶端对齐 center：表示中间对齐 end：表示底端对齐 nearest：如果元素完全在视口内，则垂直方向不发生滚动；如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内
inline	定义水平方向的对齐，默认为"nearest" start：表示左端对齐 center：表示中间对齐 end：表示右端对齐 nearest：如果元素完全在视口内，则水平方向不发生滚动；如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内

---

界面显示代码-style

知识点：position:sticky 粘性定位

1. 视口元素：显示内容的区域。会设置宽，高。一般会设置 overflow:hidden

2. 容器元素：离 sticky 元素最近的能滚动的祖先元素

3. 粘性约束元素：粘性定位的父元素。有时粘性约束元素就是容器元素

4. sticky 元素：设置了 position:sticky的元素

失效情况：

①未指定 top、right、top 以及 bottom 中的任何一个值

②垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度

③ 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

显示如下，效果为：①点击左侧科室，右侧详情对应内容会滚动到可视区域；②向上滚动，左侧科室滚动到顶点会停止滚动，右侧详情会继续滚动；