尚硅谷 Vue3+TypeScript 学习笔记（中）

目录

三、路由

3.1. 【对路由的理解】

3.2. 【基本切换效果】

3.3. 【两个注意点】

3.4.【路由器工作模式】

3.5. 【to的两种写法】

3.6. 【命名路由】

3.7. 【嵌套路由】

3.8. 【路由传参】

query参数

params参数

3.9. 【路由的props配置】

3.10. 【 replace属性】

3.11. 【编程式导航】

3.12. 【重定向】

四、pinia

4.1【准备一个效果】

4.2【搭建 pinia 环境】

4.3【存储+读取数据】

4.4.【修改数据】(三种方式)

4.5.【storeToRefs】

4.6.【getters】

4.7.【$subscribe】

4.8. 【store组合式写法】

三、路由

3.1. 【对路由的理解】

3.2. 【基本切换效果】

  • Vue3中要使用vue-router的最新版本，目前是4版本。

  • 路由配置文件代码如下：

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'const router = createRouter({history:createWebHistory(),routes:[{path:'/home',component:Home},{path:'/about',component:About}]
})
export default router
  • main.ts代码如下：
import router from './router/index'
app.use(router) # 使用你创建的路由器app.mount('#app')
  • App.vue代码如下
<template><div class="app"><h2 class="title">Vue路由测试</h2><!-- 导航区 --><div class="navigate"><RouterLink to="/home" active-class="active">首页</RouterLink><RouterLink to="/news" active-class="active">新闻</RouterLink><RouterLink to="/about" active-class="active">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView></div></div>
</template><script lang="ts" setup name="App">import {RouterLink,RouterView} from 'vue-router'  
</script>

3.3. 【两个注意点】

  1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

  2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

3.4.【路由器工作模式】

history模式

优点：URL更加美观，不带有#，更接近传统的网站URL。

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

const router = createRouter({history:createWebHistory(), //history模式/******/
})

hash模式

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有#不太美观，且在SEO优化方面相对较差。

const router = createRouter({history:createWebHashHistory(), //hash模式/******/
})

3.5. 【to的两种写法】

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link><!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

3.6. 【命名路由】

作用：可以简化路由跳转及传参（后面就讲）。

给路由规则命名：

routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About}
]

跳转路由：

<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link><!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>

3.7. 【嵌套路由】

1、编写News的子路由：Detail.vue

2、配置路由规则，使用children配置项：

const router = createRouter({history:createWebHistory(),routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail}]},{name:'guanyu',path:'/about',component:About}]
})
export default router

3、跳转路由（记得要加完整路径）：

<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

4、记得去Home组件中预留一个<router-view>

<template><div class="news"><nav class="news-list"><RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">{{news.name}}</RouterLink></nav><div class="news-detail"><RouterView/></div></div>
</template>

3.8. 【路由传参】

query参数

传递参数

<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">跳转
</router-link><!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink :to="{//name:'xiang', //用name也可以跳转path:'/news/detail',query:{id:news.id,title:news.title,content:news.content}}"
>{{news.title}}
</RouterLink>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)

params参数

传递参数

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink><!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink :to="{name:'xiang', //用name跳转params:{id:news.id,title:news.title,content:news.title}}"
>{{news.title}}
</RouterLink>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位

备注3：传递params参数时，不能传对象和数组

注意：如果占位方式传参，可以设置不是必传，那就需要在路由路径加问号，比如我content想可传可不传，那就把路由路径 path:'detail/:id/:title/:content?'

3.9. 【路由的props配置】

作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

{name:'xiang',path:'detail/:id/:title/:content',component:Detail,// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3}, // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件// props:true// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}
}

接收参数

defineProps(['id','title','content'])

3.10. 【 replace属性】

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。

  2. 浏览器的历史记录有两种写入方式：分别为push和replace：

    • push是追加历史记录（默认值）。

    • replace是替换当前记录。

  3. 开启replace模式：

<RouterLink replace .......>News</RouterLink>

3.11. 【编程式导航】

路由组件的两个重要的属性：$route和$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'const route = useRoute()
const router = useRouter()console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

例如：

function showNewsDetail(news: any) {router.push({name: 'xiang',query: {id: news.idtitle: news.title,content: news.content}})
}

3.12. 【重定向】

  1. 作用：将特定的路径，重新定向到已有路由。

  2. 具体编码：

{path:'/',redirect:'/about'
}

四、pinia

集中式状态（数据）管理，vue2是vuex，vue3是pinia。

4.1【准备一个效果】

4.2【搭建 pinia 环境】

第一步：npm install pinia

第二步：操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

此时开发者工具中已经有了pinia选项

4.3【存储+读取数据】

1、Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

2、它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

3、具体编码：src/store/count.ts

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}
})

4、具体编码：src/store/talk.ts

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{// 动作actions:{},// 状态state(){return {talkList:[{id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},{id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},{id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}]}},// 计算getters:{}
})

5、组件中使用state中的数据

<template><h2>当前求和为：{{ sumStore.sum }}</h2>
</template><script setup lang="ts" name="Count">// 引入对应的useXxxxxStore	import {useSumStore} from '@/store/sum'// 调用useXxxxxStore得到对应的storeconst sumStore = useSumStore()
</script>
<template><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li></ul>
</template><script setup lang="ts" name="Count">import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore()
</script>

4.4.【修改数据】(三种方式)

1、第一种修改方式，直接修改

countStore.sum = 666

2、第二种修改方式：批量修改

countStore.$patch({sum:999,school:'atguigu'
})

3、第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//减decrement(value:number){if(this.sum > 1){this.sum -= value}}},/*************/
})

组件中调用action即可

// 使用countStore
const countStore = useCountStore()// 调用对应action
countStore.incrementOdd(n.value)

4.5.【storeToRefs】

  • 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。

  • 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据包括方法。

<template><div class="count"><h2>当前求和为：{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore，随后解构 */const {sum} = storeToRefs(countStore)
</script>

4.6.【getters】

1、概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。

2、追加getters配置。

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'atguigu'}},// 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
})

3、组件中读取数据：

const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

4.7.【$subscribe】

通过 store 的 $subscribe() 方法侦听 state 及其变化

talkStore.$subscribe((mutate,state)=>{console.log('LoveTalk',mutate,state)localStorage.setItem('talk',JSON.stringify(talkList.value))
})

4.8. 【store组合式写法】

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求，下面这行的写法是：连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串，包装成一个对象let obj = {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2778070.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

C++，stl，list容器详解

C++，stl，list容器详解

目录 1.list基本概念 2.list构造函数 3.list的赋值和交换 4.list大小操作 5.list的插入的删除 6.list数据存取 7.list反转和排序 排序案例 1.list基本概念 2.list构造函数 #include<bits/stdc.h> using namespace std;void print(const list<int> &lk) …
阅读更多...
.NET命令行（CLI）常用命令

.NET命令行（CLI）常用命令

本文用于记录了.NET软件开发全生命周期各阶段常用的一些CLI命令&#xff0c;用于开发速查。 .NET命令行&#xff08;CLI&#xff09;常用命令 项目创建&#xff08;1&#xff09;查看本机SDK&#xff08;2&#xff09;查看本机可以使用的.NET版本&#xff08;3&#xff09;生成…
阅读更多...
【开源】SpringBoot框架开发桃花峪滑雪场租赁系统

【开源】SpringBoot框架开发桃花峪滑雪场租赁系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 游客服务2.2 雪场管理 三、数据库设计3.1 教练表3.2 教练聘请表3.3 押金规则表3.4 器材表3.5 滑雪场表3.7 售票表3.8 器材损坏表 四、系统展示五、核心代码5.1 查询教练5.2 教练聘请5.3 查询滑雪场5.4 滑雪场预定5.5 新…
阅读更多...
基于完全二叉树实现线段树-- [爆竹声中一岁除,线段树下苦踌躇]

基于完全二叉树实现线段树-- [爆竹声中一岁除,线段树下苦踌躇]

文章目录 一.完全二叉树完全二叉树的父子结点引索关系 二.线段树三.基于完全二叉树实现线段树关于线段树的结点数量问题的证明递归建树递归查询区间和递归单点修改线段树模板题 一.完全二叉树 完全二叉树的物理结构是线性表,逻辑结构是二叉树 完全二叉树的父子结点引索关系 …
阅读更多...
【数据结构】双向链表(链表实现+测试+原码)

【数据结构】双向链表(链表实现+测试+原码)

前言 在双向链表之前&#xff0c;如果需要查看单链表来复习一下&#xff0c;链接在这里&#xff1a; http://t.csdnimg.cn/Ib5qS 1.双向链表 1.1 链表的分类 实际中链表的结构非常多样&#xff0c;以下情况组合起来就有8种链表结构&#xff1a; 1.1.1 单向或者双向 1.1.2 …
阅读更多...
专业135+总400+中国科学院大学859国科大信号与系统考研经验电子信息与通信，真题，大纲，参考书

专业135+总400+中国科学院大学859国科大信号与系统考研经验电子信息与通信，真题，大纲，参考书

今年考研专业课859信号与系统135&#xff0c;总分400上岸国科大&#xff0c;总结一下自己这一年的复习经验&#xff0c;希望对后面报考中科院大学的同学有所帮助。 专业课&#xff1a; 国科大不同研究所都是统一命题&#xff0c;859信号与系统的参考书目是郑君里的《信号与系…
阅读更多...
C语言——oj刷题——调整数组使奇数全部都位于偶数前面

C语言——oj刷题——调整数组使奇数全部都位于偶数前面

题目&#xff1a; 输入一个整数数组&#xff0c;实现一个函数&#xff0c;来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分&#xff0c;所有偶数位于数组的后半部分。 一、实现方法&#xff1a; 当我们需要对一个整数数组进行调整&#xff0c;使得奇数位于数…
阅读更多...
[职场] 职场上该如何和同事相处呢？七种方法教你和同事友好相处 #其他#媒体

[职场] 职场上该如何和同事相处呢？七种方法教你和同事友好相处 #其他#媒体

职场上该如何和同事相处呢&#xff1f;七种方法教你和同事友好相处 在职场上&#xff0c;如何和同事相处是一堂必修课。同事&#xff0c;是我们天天必须看到的人&#xff0c;只有和同事友好相处&#xff0c;我们才能生活得更好&#xff0c;工作得更好。那么&#xff0c;我们在…
阅读更多...
Days 27 ElfBoard 板 AltiumDesigner 相同电路快速布局布线

Days 27 ElfBoard 板 AltiumDesigner 相同电路快速布局布线

在进行设计开发的时候&#xff0c;总会遇到相同的电路&#xff0c;或者模块&#xff0c;这些电路可以使用相同的布局和走线&#xff0c;例如 DC-DC 电源、网口 PHY 电路部分。这类型的电路&#xff0c;我们可以采用AltiumDesigner 中的 Room 进行布局和布线的快速复制&#xff…
阅读更多...
备战蓝桥杯---动态规划之背包问题引入

备战蓝桥杯---动态规划之背包问题引入

先看一个背包问题的简单版&#xff1a; 如果我们暴力枚举可能会超时。 但我们想一想&#xff0c;我们其实不关心怎么放&#xff0c;我们关心的是放后剩下的体积。 用可行性描述即可。 于是我们令f[i][j]表示前i个物品能否放满体积为j的背包。 f[i][j]f[i-1][j]||f[i-1][j-v…
阅读更多...
【十四】【C++】list 的常见用法

【十四】【C++】list 的常见用法

list 的初始化和遍历 /*list的初始化和遍历*/ #if 1 #include <list> #include <vector> #include <iostream> #include<algorithm> using namespace std;void TestList1(){list<int> L1;list<int> L2(10, 5);vector<int> v{1,2,3,4…
阅读更多...
使用Arduino UNO和蓝牙模块制作智能小车

使用Arduino UNO和蓝牙模块制作智能小车

目录 概述 1 硬件结构 1.1 硬件组成 1.2 蓝牙模块介绍 1.3 控制板IO引脚定义 2 机械结构 3 固件设计 4 App设计 5 参考文献 概述 本文主要介绍使用Arduino UNO作为主板&#xff0c;用于控制电机和接收蓝牙模块数据。蓝牙模块用于从手机App上接收控制信号&#xff0c;使…
阅读更多...
（每日持续更新）信息系统项目管理（第四版）（高级项目管理）考试重点整理第10章 项目进度管理（四）

（每日持续更新）信息系统项目管理（第四版）（高级项目管理）考试重点整理第10章 项目进度管理（四）

博主2023年11月通过了信息系统项目管理的考试&#xff0c;考试过程中发现考试的内容全部是教材中的内容&#xff0c;非常符合我学习的思路&#xff0c;因此博主想通过该平台把自己学习过程中的经验和教材博主认为重要的知识点分享给大家&#xff0c;希望更多的人能够通过考试&a…
阅读更多...
巴尔加瓦算法图解：算法运用（上）

巴尔加瓦算法图解：算法运用（上）

目录 树反向索引傅立叶变换 并行算法MapReduce函数 树 如果能将用户名插入到数组的正确位置就好了&#xff0c;这样就无需在插入后再排序。为此&#xff0c;有人设计了一种名为二叉查找树(binary search tree)的数据结构。 每个node的children 都不大于两个。对于其中的每个…
阅读更多...
python_蓝桥杯刷题记录_笔记_全AC代码_入门4

python_蓝桥杯刷题记录_笔记_全AC代码_入门4

题单目录 1.P1914 小书童——凯撒密码 2.P1028 [NOIP2001 普及组] 数的计算 3.P1036 [NOIP2002 普及组] 选数 4.P1149 [NOIP2008 提高组] 火柴棒等式 5.P1217 [USACO1.5] 回文质数 Prime Palindromes 6.P1478 陶陶摘苹果&#xff08;升级版&#xff09; 7.P1618 三连击&…
阅读更多...
软件价值11-简单计算器

软件价值11-简单计算器

用python的tkinter做的简单计算器 代码&#xff1a; import tkinter as tkdef button_click(item):global expressionexpression expression str(item)input_text.set(expression)def button_clear():global expressionexpression ""input_text.set(""…
阅读更多...
51单片机编程应用（C语言）：串口通信

51单片机编程应用（C语言）：串口通信

目录 通信的基本概念和种类 1.1串行通信与并行通信 ​编辑 1.2同步通信与异步通信 1.3单工&#xff0c;半双工&#xff0c;全双工 1.4通信速率 二、波特率和比特率的关系 串口通信简介&#xff1a; 1.接口标准 RS-232 2、D型9针接口定义 3.通信协议&#xff1a; …
阅读更多...
嵌入式系统的前景：未来智能汽车

嵌入式系统的前景：未来智能汽车

&#xff08;本文为简单介绍&#xff0c;个人的观点仅供参考&#xff09; 智能汽车时代已经来临!未来十年,我们的汽车将变得越来越智能化。各大汽车公司在研发自动驾驶技术,目标是实现真正的无人驾驶。要实现这一目标,嵌入式系统将发挥关键作用。 简单来说,嵌入式系统就是在汽…
阅读更多...
【Make编译控制 01】程序编译与执行

【Make编译控制 01】程序编译与执行

目录 一、编译原理概述 二、编译过程分析 三、编译动静态库 四、执行过程分析 一、编译原理概述 make&#xff1a; 一个GCC工具程序&#xff0c;它会读 makefile 脚本来确定程序中的哪个部分需要编译和连接&#xff0c;然后发布必要的命令。它读出的脚本&#xff08;叫做 …
阅读更多...
AcWing 1240 完全二叉树的权值（双指针）

AcWing 1240 完全二叉树的权值（双指针）

[题目概述] 给定一棵包含 N 个节点的完全二叉树&#xff0c;树上每个节点都有一个权值&#xff0c;按从上到下、从左到右的顺序依次是 A 1 , A 2 , ⋅ ⋅ ⋅ A N A_1,A_2,⋅⋅⋅A_N A1​,A2​,⋅⋅⋅AN​&#xff0c;如下图所示&#xff1a; 现在小明要把相同深度的节点的权值…
阅读更多...
最新文章

Copyright @ 2022~2023