type
status
summary
date
slug
tags
category
icon
password
vue3的js必会基础
vue3中必会的js语法基础部分
1.变量字符串和常量字符串
let定义
const定义
const定义的数组和对象内的值能改变
2.模板字符串：
使用``反引号
能隔行定义字符串还有&{}套用使用
3.对象取值和对象内变量属性简写
当定义对象的时候，定义的属性和变量同名就能简写定义
4.数组和对象解构赋值
5.箭头函数
关于箭头函数的应用，既能用与普通函数声明也能使用回调函数
6.数组的重要方法
6.1对与数组的插入删除等
push（最后一个位置插入，unshift（在第一个位置插入），shift(删除第一个元素）,pop(返回值是删除的值)，splice函数
splice(起始操作位置，删除元素个数，…添加元素的值）
6.2foreach函数
和filter与map一样遍历函数但是不能改变数组
6.3filter函数：去掉一部分函数，保留一部分函数
格式：
filter((item,index,array)⇒{
//判
//返回布尔类型
通过布尔类型判断该元素保留还是去掉
}）
6.4 map映射
和filter和foreach相同都是map（）中传入一个回调函数这里面需要0-3个参数item，index，array一般来说其实前两个比较常用
filter和map对于回调函数是需要返回值的但是foreach不需要，因为前两者会通过返回值改变一个数组，但是foreach方法不会改变
6.5
every（）
6.6数组中一个很重要的方法—-汇总reduce（）
常用于对数组的求和
其中prev取决于第二个参数（第一次）和回调函数的返回值（其他）
7.对象中的重要方法
7.1遍历属性
8.扩展运算符
扩展运算符：…
作用：
1.在解构数组的时候用扩展运算符接收剩下的数组元素
2.复制数组或者对象
3.合并数组或者对象
复制：
let arr = [1,2,3,4]
let arr2 = […arr]
值复制值不复制地址，互不干涉
obj = {
name ；‘name’，
age ； 18，
gender ：‘man’
}
let obj2 = {
…obj
}
合并：
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr = […arr1,…arr2]
合并对象同理
9.序列化
其实就是数据转换成json格式
json是一种严格的对象表示格式
所谓序列化就是把普通格式变成json格式
序列化:JSON.stringify(对象)
反序列话就是将JSON格式的字符串转换为对象
10.web存储
web storage，能将数据存储在本地浏览器中，相当与在浏览器上的数据库
包含两种机制
1.session storage
在浏览器打开阶段就可用直到浏览器关闭，数据永远不会传输到服务器存储限额大于cookie（最大5mb）
2.local storage
即使浏览器关闭重新打开也存在，存储的数据没有过期日期，只能通过javascript或者清楚浏览器缓存和本地存储数据才能删除
11.promise + Aysnc/Await
这里介绍一个函数setTimeout函数
什么是promise：
js新增的一个类，用来解决异步问题（代码同时执行），通过异步成功还是失败决定promise的状态
有三种状态：
pending：状态不确定
fullfilled：成功
reject：失败，
状态不可以改变
只能是有pending→fullfilled or pending→reject
12.模块化
什么是模块：一个文件就是一个模块
模块化：一种代码的开发思想，我们不会把所有的代码写在一个文件中，我们会通过每一部分代码的不同功能将他们写在不同的文件中
比如：
views：管理页面
api：管理与后端进行交互的接口函数
utils：管理公共的工具函数比如数组求和，加减乘除等
…
步骤：
1.vscode中新建一个es目录
2.命令行进入该文件（vscode中右键然后终端）或者去到资源管理器中路径上输入cmd打开
3.执行npm init，初始化得到package.json文件
4.给json文件添加”type” : “module”
5.根目录下新建src/index.js作为代码的入口文件
6.src目录下新建utils目录
其中模块化学习的重点是掌握导出与导入的语法
1.默认导出
注意一个模块里面只能有一个默认导出（这里第二个图片中的utils输错了）
2.按需导入和导出
vue3
前置知识学习结束之后，就开始了vue3的真正学习：
是一套构建用户界面和渐进式JavaScript框架
构建用户界面：基于数据生成标签结构，配合CSS样式，可以渲染出漂亮的用户界面
渐进式：循序渐进的学习，学多少就可以用多少
局部改造：vue的部分功能
整站开发：vue+vueRouter+pinia+工程化+模块化等
框架:一种规则，学习Vue就是学习语法，运用规则的阶段
vue的第一个hello world
1.引入vue3的源代码
2.准备容器
3.创建应用并提供数据
4.渲染数据{{数据名}}
setup函数：
1.是vue3代码的起点
2.在标签中用到的数据或函数，需要在setup中声明并返回
3.setup中也不会用到this，this也不指向Vue
声明式渲染：语法：{{表达式}}，也叫胡子语法或者插值表达式
作用：把表达式的结果展示/渲染到双标签中
常见表达式：
1.变量名
2.对象属性名
3.三元运算符/算数运算
4.函数/方法的调用
javascript中有一个split函数能将string从中切开，并放入数组中
let str = ‘hello vue’
console.log(split(str).length)
响应式函数：
reactive ref，其中前者只能将对象转变为响应式变量，后者能将所有的基本类型和引用类型转变为响应式变量
步骤：
1，从Vue中解构出ref
- 给ref传入指定的数据类型，ref就能把传入的数据变成响应式数据
谈谈ref和reactive的选择：
1.如果要将一个对象变为响应式，并且对象属性确定就用reactive
2.除此之外用ref
包管理器：
1.npm
2.yarn
3.pnpm
命令：
npm装包：npm i 包名
yarn装包： yarn add 包名
npm删包： npm un 包名
创建项目：
1.选定项目存放位置
2.在选定的位置上打开cmd执行命令：npm create vue@latest
然后跟随提示进行后续操作
3.安装项目依赖
4.打开网址，在浏览器中运行
其中主要的文件是：
1.node_modules 第三方模块包
2.package.json 项目管理文件
3.main.js 整个项目的打包的入口
4.App.vue Vue代码的入口
5.index.html 项目网页入口
.vue文件：
组成部分：script（js），template（html），style（css）三个标签组成
vue单文件的好处.vue是一个独立的模块就是一个独立的作用域，无需担心重名
，vue文件需要通过vite打包为css，html还有js文件才能通过index.html访问才行
在.vue文件的style中添加scope属性，能保证style只对template中的标签起作用
setup方式简写：
传统方式：
1.引入vue3源代码
2.准备渲染容器
3.创建应用并指明渲染的位置，同时提供数据并返回
4.插值表达式进行渲染
工程化方式：
1.在App.vue文件中提供setup文件
简写方式：
这里不用return语句
写错了
vue指令
1.概念:作用在标签上，以v-开头的属性是vue提供的一种特殊语法
2.作用：增强标签渲染数据的能力
3.分类：
1，内容渲染指令：作用基本类似插值表达式，把表达式的结果渲染到双标签中
2.属性绑定指令：把表达式的值于标签的属性动态绑定
3.事件绑定指令：用来于标签进行时间绑定，用于用户交互
4.条件渲染指令：根据表达式的true还是false，决定标签是否展示
5.列表渲染指令：基于数组循环生成一套列表
6.双向绑定指令：数据←→视图（数据和视图双向奔赴）
1.内容渲染指令
v-html =”表达式”
v-text =“表达式”
一般来说，v-text很少用因为用插值表达式就能代替他，v-html比较常用，一般用在变量中含有标签的时候能用于解析标签
<template>
<p v-html = ‘str’></p>
</…>
2.属性绑定指令
v-bond
这个是无可替代的因为插值表达式时不能改变标签属性的
语法：v-bind:属性名=“表达式”
简写：
：属性名 = “表达式”
3.事件绑定指令
语法：
v-on：事件 = “函数”
简写：@事件名 = “函数”
4.条件渲染指令
v-show,v-if,v-else-if/v-else
1.更具vue表的是时true还是false决定元素显示还是隐藏
2.语法：
如何选择v-show还是v-if如果频繁的控制就用v-show
如果少量就使用v-if
v-if可以配合v-else/v-else-if和流程控制语句一样
5.列表渲染指令：v-for
1.作用基于数组，对象，数组循环产生列表
2.语法：
1.想循环谁就给谁添加v-for
2.<li v-for=”(值变量，下标变量)in数组”></li>
产生四个li标签
3.添加key属性：
1.作用：能提高在更新列表时的更新性能
2.语法：：key=”唯一不重复的值”
3.原理：vue内部会尽可能保持Dom的复用，通过key来表明当前元素是否发生了变化，如果key不变vue就复用之前的，key的类型只能时数字或者字符串
6.双向绑定指令
1.双向：数据和视图
相互影响
v-model
经常用在表单元素
比如input，下拉列表，单选框，复选框，文本域，用于实现数据和标签value属性的双向绑定
7.指令修饰符
1.作用：借助指令修饰符号，可以让指令的功能更强大
2.分类
1.按键修饰符：@keydown.enter = “onkeydown”
2.事件修饰符：@click.prevent阻止默认行为和冒泡行为:@click.stop：同名事件不会向上传递，也可以链式调用：@click.stop.prevent
3.双向绑定修饰符：v-model.trim=“数据”，就是先将数据的首尾空格去除然后同步数据，v-model.number=”数据”尝试把数据传输过来的变成数字类型不再是字符串类型，.lazy能使数据在失去焦点的时候再把数据传过来
v-model在表单元素的用法
v-model→input[type = “text/search”]→value
v-model→textarea→value
v-model→select→option→value
v-model→radio→value(手动添加)
v-model→checkbox→
1.只有一个复选框：v-model绑定布尔值，关联的是复选框的checked属性
2.有多个复选框：v-model绑定数组，关联的复选框的value属性，手动填加
8.样式绑定
1.vue扩展了v-bind语法允许我们通过绑定class和style来控制数据控制元素的样式
2.分类：
1.绑定clas
2.绑定style
3.class绑定的语法： ：class+”三元表达式/对象”
1.：class=“条件？类1：类2”
2.：class=”{类名1：布尔值，类名2：布尔值}”,布尔值为true就添加列明，false就移除
2.第二种元素样式的绑定方式：style绑定
9.计算属性（重要）
1.定义：基于现有的数据，计算得到新数据；当现有数据发生变化，计算属性会重新计算
2.import {computed} from ’vue‘
const 新数据 = computed(()⇒{
//编写代码
return 计算结果
})
3.举例
totalscore随着数组的变化而变化
5.使用？
计算属性用法和ref等响应式变量一样可以像插值表达式和指令使用
同样的在js中要获得他的值也需要.value属性获取
6.计算属性的完整写法：
什么时候需要用到完整写法呢？需要修改计算属性的时候（给计算属性赋值）
默认的写法是只读属性的，不能赋值
完整写法：
使用情景就是当计算属性绑定了v-model属性的时候v-model会去修改的时候会用到计算属性的完整写法
10.侦听器
1.监视响应式数据的变化，当数据变化之后，进行相应的变化
比如监视搜索框内关键字的变化，变了之后，可以用最新的关键字发送请求，拿到最新的联想建议列表
2.语法：需要用到watch函数进行声明
import {watch}from’vue’
watch(响应式数据,(newVal,oldVal)⇒{
//newVal
//oldVal
})
11.阶段总结
组件级组件化+组件生命周期
1.组件及组件化
Vue.js 中的组件系统是构建大型应用的关键。组件允许开发者将界面拆分成更小、更可管理的部分，每个部分都可以独立开发和维护。以下是 Vue 组件的一些主要作用：
- 代码复用： 组件允许开发者创建可复用的代码块，这意味着你可以在不同的应用或同一应用的不同部分中多次使用同一个组件。
- 模块化： 组件提供了一种将应用分解为独立、可管理的模块的方式。每个组件负责特定的功能，这有助于保持代码的清晰和组织。
- 封装： 组件可以将模板、逻辑和样式封装在一起，隐藏内部实现的细节。这使得组件可以在不知道其内部工作原理的情况下使用。
- 维护性： 由于组件的独立性，维护和更新变得更加容易。开发者可以专注于单个组件的改进，而不会影响到其他部分。
- 可测试性： 组件的独立性使得它们更容易被测试。开发者可以针对单个组件编写测试用例，而不需要考虑整个应用的复杂性。
- 扩展性： 组件系统支持扩展和继承，允许开发者通过组合现有的组件来创建新的组件。
- 数据流管理： 组件允许开发者定义清晰的数据流，通过 props 向下传递数据，通过事件向上传递数据，这有助于管理应用的状态。
- 提高开发效率： 组件化的开发方式可以使得多个开发者同时工作在不同的组件上，而不需要担心代码冲突。
- UI一致性： 通过使用组件，可以确保应用中的 UI 元素保持一致性，因为相同的组件可以在多个地方使用，而不需要每次都重新编写样式和逻辑。
- 性能优化： 组件允许开发者对应用的特定部分进行优化，例如，通过懒加载非首屏组件来提高应用的加载速度。
- 易于集成： 组件可以很容易地与其他库或框架集成，因为它们提供了清晰的接口和明确的职责。
- 响应式和动态： 组件可以根据传入的 props 和数据动态地渲染不同的内容，使得构建响应式和动态的用户界面变得更加简单。
Vue 的组件系统非常灵活，支持递归组件、异步组件和混合 (mixins) 等高级功能，这使得 Vue 成为构建复杂单页应用的理想选择。
1.创建：新建.vue文件，填充代码
2.导入：哪里需要组件在哪里导入即可
import 组件对象 from ‘组件相对路径’
3.注册：
1.局部组件无需注册，局部组件仅限于在哪个vue文件中导入在哪个文件中使用，其他的vue文件要想使用就需要导入
2.全局组件，在main.js中注册，无需导入在所有文件中都能使用
4.使用
使用自定义标签即可
1.可以是单双标签
5.全局注册
import 组件名 from ‘路径’
app.component(’组件名’,组件名)
2.组件生命周期
1.两个问题：
- 在组件中，最早什么实际可以发送ajax请求，一进入组件就需要动态渲染商品
- 在组件中，最早什么时候可以DOM操作，比如已进入组件就让输出框聚焦
概念就是一个Vue实例（组件）从创建到卸载的整个过程
2.四个阶段
1.创建：创建响应式数据和函数
2.挂载：渲染模板（把组件的template下的标签插入到真实DOM树）
3.更新：数据变了，重新渲染
4.卸载/销毁：把组件溢出，从这是DOM数中移除
3.组件生命周期钩子函数
1.组件的生命周期就是vue实例从创建到卸载的一个阶段
2.在这四个阶段中，这些自动执行的函数就称为生命周期钩子函数，简称钩子
3.钩子的本质就是函数，只不过这些函数有vue内部自动调用，所以对程序员来说，能在特定的事件添加自己的代码的机会比如在组件创建完毕之后，就像发送ajax请求，那么就可以在创建后的钩子函数中编写相关代码，比如在页面渲染完毕之后添加输入框聚焦，那么可以在挂载后的钩子函数编写相关代码
4.一共有八个也可以说是九个钩子函数
每个阶段都有两个钩子
创建：1.beforeCreate()2.created()
挂载：1.beforeMount()2.Mounted()
更新：1.beforeUpdate()2.Updated()
卸载：1.beforeUnmount()2.Unmount()
第九个：setup()xs
5.我们会通过选项式API方式学习生命周期钩子
vue3编写代码的风格
1.选项式API（option API）
2.组合式API（option API）
阶段总结（vue下阶段）
组件间的通信
1.父子组件：
父传子：props自定义属性
子传父：emit自定义事件
2.非父子组件：
祖先与后代：provide（）
兄弟组件：enventBus（事件总线）
跨组件通信方案：Pinia（状态管理）
父传子
子传父
当我们需要改变父亲传给子组件的数据的时候，我们会发现我们单单改子组件内的数据是改不了的所以我们需要子传父
步骤1.父组件提供修改数据的函数，在组件内，子组件标签上绑定事件子组件
2.子组件在恰当实际，通知父组件调用emit（‘自定义事件’，x）
其实就是在子组件自定义标签中自定义一个事件，当子组件想要修改数据的时候就通信触发这个事件
所以这个操作的本质上是父组件修改自己的参数，子组件起到一个通知的作用
通知的函数就是:let emit = defineEmit()
props校验
我们之前使用的创建props的方法叫数组接收法,在介绍一种对象校验法
let props = defineProps({
name: String
age : Number
})
这里再介绍一种Props的完整写法：为了解决当父组件不传递数据的时候子组件也有默认值
defineProps({
width:{
type:Number,
defualt:50,
required:true/false
validator（value）{
return value<100 && value>0
}
}
})
这里default和required不用同时写，type必须要写
这里的validator主要是约束数据比如width必须大于零，这地方光凭type是约束不了的,这里validator和对象里面定义函数是不一样的。。。提示
ref/reactive和props之间的区别
1.相同点：都是为组件提供数据，进而使用
2.不同点：
1.ref/reactive：是组件自己的数据，可读可写
2.props是父组件的数据，可读属性，想要修改数据需要用到defineEmit函数创建通知父组件的自定义事件
单向数据流：子组件的props是来自于父组件的，当父组件的数据修改了，会影响子组件中的数据，数据流动方向只能是父亲到儿子
祖先组件和后代组件传递数据
祖先提供数据： provide（‘数据名’，数据）
后代接收数据： let 数据名 = inject（’数据名‘）
任意两个组件通信：（比较麻烦用的比较少）
1.创建一个中间人模块
2.确定消息的发送方：中间人.emit(‘事件名称’，数据)
3.确定消息的接收放：中间人.on(’事件名称’,(数据)⇒{
})
v-model进阶+ref属性+nextTick函数
v-model的原理和v-model在自定义标签中的应用
其实还能和子组件进行一个简化：
ref获得原生DOM元素
此ref非彼ref
1.是作用在标签上的属性，是vue新增的，原生不具备这个属性
2.作用：能用来获取原生DOM或组件实例（进而调用组件提供的方法）
步骤：
1.准备一个ref数据，并绑定在想获取的标签上<Xxx ref=”ref响应式数据”/>
2.恰当时机，通过ref.value来获取原生DOM或组件实例
推荐echarts：一个开源的表单组件网站
ref属性：获取组件实例，进而是为了调用组件给我们提供的方法
1.准备MyForm的表单组件，主要需要提供一个检验的方法
2.在App中使用MyForm组件，添加登录按钮，今后想知道点击了登录按钮之后，是校验成功了还是失败了，进而可以进行后续的工作
如果父组件想要通过ref属性拿到子组件想要传递的方法或者数据，就可以在子组件中：
defineExpose（{
数据1，
数据2，
函数1
}）（这个函数里面的对象采用了简写的方式）
在父组件中想要拿到这个数据就需要通过ref属性然后.value就能拿到了
nextTick()
- 是什么：是vue3提供的一个方法
- 2.作用：当数据变化时候，想要获取更新后的DOM，需要把代码写在这个方法的回调函数中
：这里解释一下，在vue中代码的执行和DOM的更新是异步的，所以想要在数据更新后是无法立即拿到更新后的DOM的，
所以如果想要拿到更新后的DOM就需要通过nextTick函数，在他的回调函数中拿到DOM并进行操作
这个方法的使用频次不高，但是需要有印象，当拿不到DOM对象的时候就可能就需要这个函数
阶段总结
自定义指令+插槽+商品列表案例
1.自定义指令：
指令分为内置指令和自定义指令，
除了内置指令vue也能让开发者使用自己自定义指令
作用：封装一段公共的DOM操作的代码
使用步骤：
1.先定义：
main,js→app.directive(’指令名’,{
mounted(el){
//这是一个能是元素进入界面就能被聚焦的指令
el.focus()
}})
2.使用：<Xxx v-指令名/>
这个el就是指令所在的DOM元素
简化形式：
就是将mounted和updated两个钩子合写
app.directive(’color’,(el,binding)⇒{
el.style.color = binding.value
})
封装v-loading:
实际开发过程中，发送请求需要时间，在请求的数据会回来时候，页面会处于空白状态⇒用户体验不好
解决方案：封装一个loading指令，实现加载中的效果
分析：
1.本质loading效果就是一个蒙层，盖在了盒子上
2.数据请求中，开启loading状态，添加蒙层
3.数据请求完毕，关闭loading状态，移除蒙层
实现：
1.准备一个loading类，通过伪元素定位，设置宽高，实现蒙层
2.开启关闭loading状态（添加移除蒙层），本质只需要添加移除类即可
3.结合自定义指令的语法进行封装复用
默认插槽
1.作用：让组件内部的一些结构支持自定义
2.需求：将需要多次显示的对话框封装成一个组件
3.问题
组件的内容部分，不希望写死，希望能使用的时候自定义
4.使用：
在使用组件的时候，给组件传入想展示的结构，从而替换掉占位的slot组件（slot就是一个在组件中替换了不确定位置的标签）
在父组件想要使用默认插槽的时候，自定义组件必须用双标签
<Mydialog>
<span>确定要退出系统?</span>
</Mydialog>
当然也可以这样：
<Mydialog>
账号：<input type=”text”><br/>
密码：<input type=”password”><br/>
</Mydialog>
插槽默认值
在组件的slot标签里面包裹标签或者文本就是默认值
在父组件双标签中的内容会默认替换这些内容
具名插槽
1，需求
一个组件内有多处结构，需要外部传入标签进行定制
2.语法
多个slot使用name来区分名字
template配合v-slot：名字 来分发对应标签
其中v-slot能简写为#
作用域插槽（功能最强大的插槽）
1.作用：
带数据的插槽，可以让组件功能更强大，更灵活，复用性更高，用slot占位的时候还能给slot绑定数据
在使用组件的时候，不仅可以传内容，还能使用slot带来的数据
2.场景
封装表格组件
阶段小结：
vue-router:vue3路由管理器
1基本介绍：
单页面应用程序
概念：整个应用只有一个入口网页文件，欢聚话说，就是index.html换句话说就是项目所有的功能都集中在同一个html来实现的
举例：
单页面：网易云音乐
就是在点击其他功能的时候，不会刷新页面
vs多页面
实现方式：一个html文件 vs 多个html文件
用户体验：单好，多不行单性能更高
开发效率：单更高
首屏加载：单慢，多快
是否利于SEO：单不利于SEO，多利于（SEO是搜索引擎优化，本质是通过优化网站的内容和结构能提高搜索引擎的排名，从而增加网站的流量和曝光度的一种技术）
2.路由
什么是路由：
路由其实是一种映射关系
比如生活中的路由：设备与IP地址的映射关系，不同的设备连接到同一个路由器，会得到一个唯一的IP地址
而vue3中的路由指的是：路径和页面（组件）的映射，大白话来说就是不同的路径就会显示不同的画面
在vue3中如何实现路径切换：借助vue-router的三方模块，是vue官方的模块包
介绍：
vue3的官方路由管理器
页面和组件存放目录的问题：
1.背景：因为vue3+vue-router开发项目是一个单页面应用程序，而又要在单页面中实现页面切换，其实就是借助vue文件来切换的，在这里就与之前的组件的扩展名一样了，为了区分便于管理，有需要进行不同的划分和存储
2.关于vue文件的分类：
1.页面组件：一个做好的，大的形成的页面，比如jd的首页，搜索页等，用于展示，不需要复用，配合路由切换
2.复用组件：
很明显就是一个小部分像搜索框，能复用
3.存放目录得问题：
1.页面组件：存放在src/views目录下
2.复用组件：存放在src/component目录下
vue-router的使用
1.基本使用：
- 1下载VueRouter模块
yarn add vue-router
2.导入相关函数,在main.js中编写代码
import{ createRouter,createWebHashHistory } from ‘vue-router’
3.创建路由实例
4.注册，让路由生效
最后在App.vue中配置路由出口
vue-router运作原理：
当路径（url）发生变化的时候，相应的页面是如何渲染出来的，
当浏览器的url地址发生变化的时候，会与routes数组中的path进行配对，如果命中了，就会把相应的组件渲染刀<router-view></router-view>的位置,没有命中就显示空白
抽离封装路由模块
问题：路由配置代码都写在main.js中（当项目很大时）会显得代码很臃肿
为了之后很好的对路由代码的管理和维护，最好的方式就是将所有路由的代码全部放在一个文件中
如何封装：
1.新建src/router/index.js，然后把之前全部放在main.js的路由管理代码全部移到router/index.js文件中并导出router实例
2.在main.js中导入router实例并注册（ export defualt index.js文件中createrouter()函数返回的router对象,在main.js文件中import router from ‘./router/index.js’）
声明式导航跳转与传参
1.声明式导航
问题：要手动输入地址，切换页面不太合理，能否点击链接直接跳转
解决方案：
vue-router提供一个全局组件router-link，用于点击跳转，需要绑定属性to，其本质就是a标签
语法：
<router-link to=”/Friend”></router-link>
<router-link to=”/Find”></router-link>
如果想要对router-link进行样式修改：
选中nav 下的a标签即可，并且当用户点击每个标签之后，每个标签所处的a标签中会加上两个高亮class，route-link-active，router-link-exact-active，我们现阶段先用短的这个，router-link-active，当需要给当前点击标签添加高亮样式就直接选中这两个类名添加样式即可
那这两个类名有什么区别吗
router-link-active:模糊匹配当浏览器后面的地址包含to的内容
router-link-exact-active:精准匹配，当浏览器后面的地址等于to属性绑定的内容的时候
2.router-link标签的传参：
传递：
语法1：
<router-link to=”/path?参数名1=值&参数名2=值”><router-link>
语法2：
<router-link to=”{path: path值,query:{参数1：值，参数2：值}}”><router-link>
接收：
组件内:
import {useRoute} from ‘vue-router’
const route = useRoute()
consloe.log(route.query.参数名)
(两种传参的接收方式都是一样的)
3.声明式导航第二种传参方式：动态路由传参
1.查询参传参数：<router-link to=”/friend?id=10086”>friend<router-link>
先传再取
2.动态路由传参：<router-lnik to=”/friend/10010”>friend<router-link>
先改写路由表的path值：/friend/：fid
传参
取值const route = useRoute()
通过上述操作就能在route变量中拿到fid=10010
这里有一个区别：普通传参：route.query.参数 动态传参:route.params.参数名
4.vue-router的更多配置：
1.重定向：当路由匹配了某个path，强制跳转到了一个path
当前我们的代码存在两个明显的问题
1）项目默认打开，访问的时候出现空白
2）控制台出现黄色的warning（没有匹配到路由表中的/路径）
为了解决上述两个问题，就该重定向出场了。只需要在路由表的开头添加一个能够匹配/根路径的规则
也就是在配置路由规则的时候:
2.404
需求：如果路由能命中，则显示相应的页面，否则，不希望显示空白，而是显示404页面
解决：配置404规则
1）创建404规则
2）在路由表的末尾加上规则，{path:’/:pathMatch(.*)*’,component:_404}
（需要自己准备一个404页面或者说组件(页面组件：存放在src/views目录下)）
生效规则：如果能正常命中就显示正常页面，如果不能就不行了
3.路由的模式：默认采用hash模式，特点是路径上会有一个#，也可以通过使用history模式就能去除路径中的#
导入createWebHistory(),取代之前的createWebHashHistory()
注意在vite开发环境下，我们可以正常使用历史模式进行切换，但是如果上线之后可能需要在服务器上配置选项
编程式导航与传参
什么是编程式导航，需求式什么：
对于声明式导航来说，式用户自己点击过后跳转，当有以下情景的时候就需要编程式导航自动跳转：
用户输入密码成功之后跳转，
支付成功之后跳转
…
编程式导航就是通过js代码主动跳转页面，相对于之前的声明式式被动的
- 语法：
1）获取router路由实例
import{useRouter} from ‘vue-router’
const router = useRouter(),router是路由实例，也就是createRouter的返回值
const route = useRoute()这里拿到的route拿到的当前组件从route-link拿到数据
2)router.push(字符串/对象)
需求：在发现音乐页，过载完毕之后延迟两秒，自动跳转朋友页
Find.vue:
编程式导航传参
声明式传参和编程式传参模式式差不多的
对于声明式来说是在to中的字符串中添加参数，对于编程式导航传参其实也是一样的就是在push中路径后面加上参数，这里格式与声明式传参是一样的
路由的嵌套和守卫（重点和难点）
问题：我们能不能在一个路由页面中，再进行一套路由的切换呢？比如网易云的音乐页
路由嵌套：在一个路由页面中，还可以进行路由切换
实现：
1.准备二级页面（创建vue文件吗，填充结构+样式+行为），并在路由规则表中进行配置
2.在相应的一级界面中添加二级页面的出口
（配置之后记得给出出口<router-view><router-view>）
想要点击之后切换同样就需要router-link标签
路由守卫
问题：
能否在访问某个路由前，提娜佳权限判断？比如我的音乐页，只有登陆了才能访问
如何解决：
路由（导航）全局前置守卫，每个路由在跳转前都会触发回调函数
需求：在没有登录的情况下，是不能访问我的音乐页的，其他的正常访问
vue-router总结
Pinia：vue3状态管理
符合直觉的vue.js状态管理库
类型安全，可扩展性和模块化设计
介绍：
专门配合vue使用的状态管理，从而实现跨足剑通信或直线多个组件共享数据的一种技术
使用目的：
1.共享数据比如，当一个组件想要操控一个数据的时候同时又另外一个组件想要改变一个数据，这个时候可能容易出现互斥或者出错，所以，pinia能将多个组件的共享数据存储在pinia中，某个组件的私有数据依旧存储在组件自身内部
当多个页面需要同一个数据比如用户名，此时用户名就需要存放到pinia中
2.多个数据保持同步，并且数据的变化是可追踪的
2.操作，并且模块化pinia
在src目录下创建store目录，在目录下创建stock.js文件
- Author:PytC
- URL:https://PytC.fun//article/16949b4c-fd33-80cf-9218-fedd5b891cdb
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!