vue3全网最全教程-----(3)

目录

4. 路由

4.1. 【对路由的理解】

4.2. 【基本切换效果】

4.3. 【两个注意点】

4.4.【路由器工作模式】

4.5. 【to的两种写法】

4.6. 【命名路由】

4.7. 【嵌套路由】

4.8. 【路由传参】

query参数

params参数

4.9. 【路由的props配置】

4.10. 【 replace属性】

4.11. 【编程式导航】

4.12. 【重定向】

5. pinia

5.1【准备一个效果】

5.2【搭建 pinia 环境】

5.3【存储+读取数据】

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

5.5.【storeToRefs】

5.6.【getters】

5.7.【$subscribe】

5.8. 【store组合式写法】

4. 路由

4.1. 【对路由的理解】

4.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>

4.3. 【两个注意点】

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

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

4.4.【路由器工作模式】

  1. history模式

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

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

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

  2. hash模式

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

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

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

4.5. 【to的两种写法】

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

4.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>

4.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>

4.8. 【路由传参】

query参数

  1. 传递参数

    <!-- 跳转并携带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>

  2. 接收参数：

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

params参数

  1. 传递参数

    <!-- 跳转并携带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>

  2. 接收参数：

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

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

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

4.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}
}

4.10. 【 replace属性】

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

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

    • push是追加历史记录（默认值）。
    • replace是替换当前记录。

  3. 开启replace模式：

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

4.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)

4.12. 【重定向】

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

  2. 具体编码：

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

5. pinia

5.1【准备一个效果】

5.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选项

5.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>

5.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}}},/*************/
})

  4. 组件中调用action即可

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

5.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>

5.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)

5.7.【$subscribe】

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

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

5.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://www.mzph.cn/news/587215.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java基层医院信息化管理系统云HIS源码

Java基层医院信息化管理系统云HIS源码

医院信息系统&#xff08;HIS&#xff09;经历了从手工到单机再到局域网的两个阶段&#xff0c;随着云计算、大数据新技术迅猛发展&#xff0c;基于云计算的医院信息系统将逐步取代传统局域网HIS,以适应人们对医疗卫生服务越来越高的要求。 云HIS分系统功能 一、医疗业务子系统…
阅读更多...
【操作系统】精选填空题

【操作系统】精选填空题

1.操作系统的4个基本特征( )( )( )( ) 2.设计操作系统要满足有效性的目标&#xff0c;有效性体现在提高系统&#xff08; &#xff09;和提高系统&#xff08; &#xff09;。 3. OS环境下的资源共享又称为资源复用&#xff0c;实现资源共享的方式包括&#xff08; &#xff09…
阅读更多...
Kasada p.js (x-kpsdk-cd、x-kpsdk-cd、integrity)

Kasada p.js (x-kpsdk-cd、x-kpsdk-cd、integrity)

提供x-kpsdk-cd的API服务 详细请私信~ 可试用~ 一、简述 integrity是通过身份验证Kasada检测机器人流量后获得的一个检测结果&#xff08;数据完整性&#xff09; x-kpsdk-cd 是经过编码计算等等获得。当你得到正确的解决验证码值之后&#xff0c;解码会看到如下图 二、cook…
阅读更多...
@RequestParam详解——获取QueryString格式参数

@RequestParam详解——获取QueryString格式参数

获取QueryString格式参数&#xff08;RequestParam&#xff09; QueryString&#xff08;查询字符串&#xff09;是指URL中?符号后面的参数部分。它通常用于在HTTP请求中传递参数给服务器。 比如&#xff1a;http://localhost:8080/test?qapple&categoryfruit 其中&…
阅读更多...
JavaScript 中的提升是什么

JavaScript 中的提升是什么

JavaScript中的提升&#xff08;Hoisting&#xff09;是指在代码执行之前&#xff0c;变量和函数的声明都会被提升到作用域的顶部。换句话说&#xff0c;变量和函数可以在它们被声明之前就可以使用。 变量提升: 在JavaScript中&#xff0c;变量的声明可以在赋值语句之前。在变…
阅读更多...
C/C++ BM4 合并两个排序的链表

C/C++ BM4 合并两个排序的链表

文章目录 前言题目1. 解决方案一1.1 思路概述1.2 源码 2. 解决方案二2.1 思路阐述2.2 源码 总结 前言 这道题采用两种方式&#xff0c;一种是直接插入法&#xff0c;还有一种就是递归调用。 题目 输入两个递增的链表&#xff0c;单个链表的长度为n&#xff0c;合并这两个链表…
阅读更多...
用IDEA创建/同步到gitee（码云）远程仓库（保姆级详细）

用IDEA创建/同步到gitee（码云）远程仓库（保姆级详细）

前言&#xff1a; 笔者最近在学习java&#xff0c;最开始在用很笨的方法&#xff1a;先克隆远程仓库到本地&#xff0c;再把自己练习的代码从本地仓库上传到远程仓库&#xff0c;很是繁琐。后发现可以IDEA只需要做些操作可以直接把代码上传到远程仓库&#xff0c;也在网上搜了些…
阅读更多...
【linux】head的用法 输出文件开头的内容

【linux】head的用法 输出文件开头的内容

在linux可以用find查找一个文件&#xff0c;可以用grep查找符合要求的文件内容&#xff0c;但是有的时候希望查看文件的前几行或者后几行&#xff08;其实这种场景经常可以遇到&#xff0c;比如接触到日志分析的时候&#xff09;&#xff0c;那就应该使用head和tail这两个工具了…
阅读更多...
Redis 数据库，忘记密码如何找回或重置

Redis 数据库，忘记密码如何找回或重置

对于 Redis 数据库&#xff0c;如果忘记了密码&#xff0c;可以通过以下步骤进行密码重置&#xff1a; 找到 Redis 配置文件 redis.conf。通常情况下&#xff0c;该文件位于 Redis 安装目录下的 etc 或 conf 文件夹中。使用任意文本编辑器打开 redis.conf 文件。在文件中找到 …
阅读更多...
Qt Creator可视化交互界面exe快速入门5

Qt Creator可视化交互界面exe快速入门5

上一期介绍了加法计算器，本期介绍QObject定时器。 首先一样先建个工程，比如我这项目名为QObject 本期的任务就是制作图片在界面上显示，然后每秒定时切换，点击另一个暂停按钮，可以定格当前图片，即取消定时切换功能。 显示图片的我们可以使用显示里面的label 这个用于显示…
阅读更多...
机场信息集成系统系列介绍（6）：机场协同决策支持系统ACDM*续集

机场信息集成系统系列介绍（6）：机场协同决策支持系统ACDM*续集

目录 1、A-CDM实施效果评估背景 2、评估核心指标项 &#xff08;1&#xff09;机位效率 &#xff08;2&#xff09;登机效率 &#xff08;3&#xff09;推出效率 &#xff08;4&#xff09;滑行效率 &#xff08;5&#xff09;协同效率 3、其他指标项 &#xff08;1&a…
阅读更多...
计算机基础--Linux详解

计算机基础--Linux详解

一概述 Linux是一种自由和开放源码的类UNIX操作系统。它是由林纳斯托瓦兹于1991年首次发布的&#xff0c;并从那时起在全球范围内得到了广泛的应用和开发。Linux具有强大的可定制性&#xff0c;可以运行在各种硬件平台上&#xff0c;包括x86、ARM、MIPS等。它不仅广泛应用于服…
阅读更多...
在 Linux 中使用 cat 命令

在 Linux 中使用 cat 命令

cat 命令用于打印文本文件的文件内容。至少&#xff0c;大多数 Linux 用户都是这么做的&#xff0c;而且没有什么问题。 cat 实际上代表 “连接(concatenate)”&#xff0c;创建它是为了 合并文本文件。但只要有一个参数&#xff0c;它就会打印文件内容。因此&#xff0c;它是用…
阅读更多...
R语言孟德尔随机化研究工具包（1）---friendly2MR

R语言孟德尔随机化研究工具包（1）---friendly2MR

friendly2MR是孟德尔岁随机化研究中的一个重要补充工具&#xff0c;可以批量探索因素间的因果关系&#xff0c;以及快速填补缺失eaf的数据&#xff0c;但是存在细微差异需要注意。 remotes::install_github("xiechengyong123/friendly2MR") library(friendly2MR)lib…
阅读更多...
工程（十七）——自己数据集跑R2live

工程（十七）——自己数据集跑R2live

博主创建了一个科研互助群Q&#xff1a;772356582&#xff0c;欢迎大家加入讨论。 r2live是比较早的算法&#xff0c;编译过程有很多问题&#xff0c;通过以下两个博客可以解决 编译R2LIVE问题&解决方法-CSDN博客 r2live process has died 问题解决了_required process …
阅读更多...
[设计模式 Go实现] 创建型～单例模式

[设计模式 Go实现] 创建型～单例模式

使用懒惰模式的单例模式&#xff0c;使用双重检查加锁保证线程安全 代码实现 package singletonimport "sync"// Singleton 是单例模式接口&#xff0c;导出的 // 通过该接口可以避免 GetInstance 返回一个包私有类型的指针 type Singleton interface {foo() }// s…
阅读更多...
华为交换机生成树STP配置案例

华为交换机生成树STP配置案例

企业内部网络怎么防止网络出现环路&#xff1f;学会STP生成树技术就可以解决啦。 STP简介 在二层交换网络中&#xff0c;一旦存在环路就会造成报文在环路内不断循环和增生&#xff0c;产生广播风暴&#xff0c;从而占用所有的有效带宽&#xff0c;使网络变得无法正常通信。 在…
阅读更多...
uni-app API接口扩展组件(uni-ui)

uni-app API接口扩展组件(uni-ui)

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…
阅读更多...
【Java | 多线程案例】定时器的实现

【Java | 多线程案例】定时器的实现

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Java系列专栏】【JaveEE学习专栏】 本专栏旨在分享学习JavaEE的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 这里写…
阅读更多...
Spring Boot快速搭建一个简易商城项目【完成登录功能且优化】

Spring Boot快速搭建一个简易商城项目【完成登录功能且优化】

完成登录且优化&#xff1a; 未优化做简单的判断&#xff1a; 全部异常抓捕 优化&#xff1a;返回的是json的格式 BusinessException&#xff1a;所有的错误放到这个容器中&#xff0c;全局异常从这个类中调用 BusinessException&#xff1a; package com.lya.lyaspshop.exce…
阅读更多...
最新文章

Copyright @ 2022~2023