Vue学习 Day03 （hooks和路由）

news2024/11/13 8:48:54

自定义hooks

准备工作：首先导入axios的依赖

案例

首先写一个子组件，如下  

<template>
<h2>{{ sum }}</h2>
<button @click="addSum">点我sum+1</button>
<hr>

<img v-for="(dog,index) in dogs" :key="index" :src="dog.src">
<br>
<button @click="addDog">点我狗狗+1</button>
</template>

<script lang="ts" setup>
    import axios from 'axios';
    import { ref,reactive } from 'vue';
    let sum=ref(0)
    let dogs=reactive([{src:"https://images.dog.ceo/breeds/pembroke/n02113023_6826.jpg"}])
    
    function addSum(){
        sum.value++;
    }

    function addDog(){
        axios.get('https://dog.ceo/api/breed/pembroke/images/random').then(
            response=>{
                let msg={src:response.data.message}
                console.log(msg)
                dogs.push(msg)
            }
        ).catch(error=>{
            console.log(error,"找不到路径")
        }
        )
    }

</script>

<style>
img{
    height: 100px;
    margin-left: 5px;
}
</style>

这个组件实现的效果如下（有两个功能，点击按钮sum+1   点击按钮出现一张新的狗狗的图片）

 注意观察代码的结构，如果一个组件要实现的功能多起来时，方法和数据都放在一个vue里面，会导致代码特别臃肿，要同时找到一个方法所需要的数据和方法也十分困难，这时候hook就派上用场了。

什么是hook？hook有什么优势？

  • 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。

  • 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

用自定义hook对上述代码进行改进

1.首先在src目录下新建一个hooks目录

2.编写自定义hook（按功能分类，将一个功能的方法和数据抽离出来，用函数包裹，最后把需要暴露的数据和方法交出去)

注意hook的命名规范为: useXxxxx

useSum.ts

useDog.ts

3.在vue中调用hook

<template>
<h2>{{ sum }}</h2>
<button @click="addSum">点我sum+1</button>
<hr>

<img v-for="(dog,index) in dogs" :key="index" :src="dog.src">
<br>
<button @click="addDog">点我狗狗+1</button>
</template>

<script lang="ts" setup>
/*     引入 */
    import useSum from '../hooks/useSum';
    import useDog from '../hooks/useDog';
/*     调用 */
    let {sum,addSum}=useSum()
    let {dogs,addDog}=useDog()
</script>

<style>
img{
    height: 100px;
    margin-left: 5px;
}
</style>

十分清爽，这里体现了vue3组合式api的思想

Vue中的路由

用路由器实现一个基本的切换效果

首先先安装路由器依赖

1.在src文件夹中创建一个router文件夹

2.准备好需要的vue们

这里准备了一个Main.vue作为主界面，要在这里面切换Community，Friend，Home三个组件

2.写一个router

MyRouter.ts

import { createRouter,createWebHistory } from "vue-router";
import community from "../components/Community.vue";
import friend from "../components/Friend.vue";
import home from "../components/Home.vue";

const router=createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:"/community",
            component:community
        },
        {
            path:"/friend",
            component:friend
        },
        {
            path:"/home",
            component:home
        }
    ]

})

3.在main.ts里面注册这个router

import { createApp } from "vue";
import App from "./App.vue";

//引入路由器
import router from "./router/MyRouter";

const app=createApp(App)

app.use(router)//注册路由器

app.mount('#app')

4.在主界面上用RouteLink组件绑定对路由路径的响应

Main.vue

 <!-- 登录成功后的主界面 -->
 <template>
<h2>登录成功后的主界面</h2>
<div class="app">
      <!-- 导航区 -->
      <div class="navigate">
        <RouterLink to="/community" active-class="active" class="navi-style">社区</RouterLink>
        <RouterLink to="/friend" active-class="active" class="navi-style">交友</RouterLink>
        <RouterLink to="/home" active-class="active" class="navi-style">个人中心</RouterLink>
      </div>
      <!-- 展示区 -->
      <div class="main-content">
        <RouterView></RouterView>
      </div>
    </div>
 </template>


<script lang="ts" setup>
    import {RouterLink,RouterView} from 'vue-router'  

</script>

<style>
.active{
    color: red;
}
.navi-style{
    margin-left: 10px;
}
</style>

Community.vue(其他两个结构同这个一样)

<!-- 社区模块 -->
<template>
    <h2>社区模块</h2>
    </template>
    <script lang="ts" setup>
    </script>
    <style>
    </style>

效果

两个注意点

1.

路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。（ps：路由组件就是通过路由器才能被渲染的组件，也就是写在RouterLink里面的组件）

2.

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

路由器工作模式

history模式

hash模式

怎么写要跳转的路由（三种方法）

to的两种写法 

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

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

命名路由（后面可以用来简化路由跳转和传参的问题）

在路由器中给路由规则命名

在Main.vue中这样写

 可以看到第一种是to的字符串写法，后面两种是to的对象写法

<!--         <RouterLink to="/community" active-class="active" class="navi-style">社区</RouterLink> -->

<!-- 里面只能用单引号 -->
<!--         <RouterLink :to="{path:'/community'}" active-class="active" class="navi-style">社区</RouterLink>  --> 

        <RouterLink :to="{name:'shequ'}" active-class="active" class="navi-style">社区</RouterLink>

嵌套路由

要实现的效果：点击社区模块显示所有的帖子，点击帖子标题在下方显示帖子的详情

1.编写Post.vue

2.将Post.vue 配置成Community.vue的子路由 

const router=createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:"/community",
            name:"shequ",
            component:community,
            //配置子路由
            children:[
                {
                    path:"post",
                    name:"tiezi",
                    component:post
                }
            ]
        },
        {
            path:"/friend",
            component:friend
        },
        {
            path:"/home",
            component:home
        }
    ]

})

export default router

3.在Community中写跳转

前两种都要加完整路径

<!-- 社区模块 -->
<template>
    <h2>社区模块</h2>
          <li v-for="post in postList" :key="post.postId">
            <!-- <RouterLink to="/community/post">{{ post.title }}</RouterLink> -->
             <!-- <RouterLink :to="{path:'/community/post'}">{{ post.title }}</RouterLink> -->
            <RouterLink :to="{name:'tiezi'}">{{ post.title }}</RouterLink>
          </li>

          <router-view></router-view>
    </template>
    <script lang="ts" setup>
    import { onMounted,onUnmounted } from 'vue';
    

    let postList=[
      {postId:"1",title:"今天天气真好",content:"我想出去玩"},
      {postId:"2",title:"最近有电影好看？",content:"推荐一下"},
      {postId:"3",title:"再也不万元神了",content:"是不可能的"},
      {postId:"4",title:"一眼顶针",content:"鉴定为假"},
      {postId:"5",title:"哈哈哈哈",content:"1234889"}
    ]

    //切换到这里挂载，切换到别的view被卸载
    onMounted(()=>{
        console.log("community被挂载了")
    })

    onUnmounted(()=>{
        console.log("community被卸载了")
    })
    </script>

路由传参

query参数传递

传递参数
            <!-- 传死数据 -->
             <!-- <RouterLink to="/community/post?postId=1&title=去干嘛&content=114514">{{ post.title }}</RouterLink> -->

            <!-- 模板字符串嵌入js -->
             <!-- <RouterLink :to="`/community/post?postId=${post.postId}&title=${post.title}&content=${post.content}`">{{ post.title }}</RouterLink> -->
            
            <!-- 携带query参数 -->
            <RouterLink :to="
                {
                    path:'/community/post',
                    query:
                    {
                        postId:post.postId,
                        title:post.title,
                        content:post.content
                    }
                }
            ">{{ post.title }}</RouterLink>
接收参数
 <template>
    <div class="post-content">
    <ul>
        <li>id:  {{route.query.postId }}</li>
        <li>标题:  {{ route.query.title }}</li>
        <li>内容:  {{ route.query.content }}</li>
    </ul>
</div>
 </template>


<script lang="ts" setup>
    //注意是useRoute   不是useRouter
    import { useRoute } from 'vue-router';
    const route=useRoute()

</script>

param参数传递

传递参数

首先需要在路由规则里面添加占位

           //param参数占位版
            children:[
                {
                    path:"post/:postId/:title/:content?",  //content加个？表示可选
                    name:"tiezi",
                    component:post
                }
            ]

 

        <!-- 传死数据 -->
        <!-- <RouterLink to="/community/post/1/出去玩/谁一起">{{ post.title }}</RouterLink> -->
        <!-- content是可选的 -->
        <!-- <RouterLink to="/community/post/1/出去玩">{{ post.title }}</RouterLink> -->   
        
        <!-- 模板字符串嵌入js -->
        <!-- <RouterLink :to="`/community/post/${post.postId}/${post.title}/${post.content}`">{{ post.title }}</RouterLink> -->

        <!-- 携带param参数              用param传递参数时,必须使用 name -->
        <RouterLink :to="
            {
                name:'tiezi',  //养成习惯，用单引号
                params:{
                    postId:post.postId,
                    title:post.title,
                    content:post.content
                }
            }
        ">{{ post.title }}</RouterLink>
接收参数
 <template>
    <div class="post-content">
    <ul>
        <li>id:  {{route.params.postId }}</li>
        <li>标题:  {{ route.params.title }}</li>
        <li>内容:  {{ route.params.content }}</li>
    </ul>
</div>
 </template>


<script lang="ts" setup>
    //注意是useRoute   不是useRouter
    import { useRoute } from 'vue-router';
    const route=useRoute()

</script>

路由的props配置

作用：用于简化接收数据的写法

1.param

 

2.query (当然param也可以这么写)

 

 

 

replace属性

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

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

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

在默认的push模式下，可以点击按钮回滚

 

开启replace

 回滚不了了

路由：编程式路由导航

我们前面写的代码，只能通过<RouterLink>标签实现路由跳转，假设我们要实现一个登录功能，会发现我们根本实现不了这个功能，因为<RouterLink>是个标签，不能放在函数里，而我们进行逻辑判断肯定要用到方法。

一个小案例

用button实现和下面<RouteLink>一样的效果

             <button @click="showPost(post)">使用编程式导航来跳转路由，显示帖子内容</button>
             <RouterLink :to="
                {
                    path:'/community/post',
                    query:
                    {
                        postId:post.postId,
                        title:post.title,
                        content:post.content
                    }
                }
            ">{{ post.title }}</RouterLink>

1.拿到路由器对象

    import { useRouter } from 'vue-router';
    const router=useRouter()

 2.要跳到哪里，传什么参数(原来 :to 里面怎么写，这个里面就怎么写)

    function showPost(post:any){
        router.push(   {
                    path:'/community/post',
                    query:
                    {
                        postId:post.postId,
                        title:post.title,
                        content:post.content
                    }
                })
    }

选择router.push 或router.replace   决定是否能回溯 

测试：点击按钮一样能实现之前的效果

 

路由：重定向

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

案例：

需求：刚进来啥也没有，我想要刚进来就显示社区的内容

**************************************

在路由器中定义一条新路由， 这条路由会在访问

的时候重定向路由到 

这样，我们一登录成功就能看到社区的帖子了

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

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

相关文章

Bugku-web-你必须让他停下来

Bugku-web-你必须让他停下来

打开环境&#xff0c;先分析出现的提示是让这个页面停下来 我们尝试关闭JS&#xff0c;发现确实停下来了-----》F12查看页面源代码但是flag还是没有出现&#xff0c;----》尝试刷新jpg随着刷新而变化&#xff0c;当刷新到10.jpg时flag出现 最后我尝试不关js刷新打开源代码刷新也…
阅读更多...
展厅中控需要配套些什么设备

展厅中控需要配套些什么设备

展厅中控系统需要配套的设备主要包括以下几个方面&#xff0c;以确保展厅内各种设备的高效管理和控制&#xff1a; 一、核心控制设备 中控主机&#xff1a; 功能&#xff1a;中控主机是展厅中控系统的核心&#xff0c;能够全面管理和控制展厅内的所有声光电设备。重要性&…
阅读更多...
Jetpack 各种框架简介

Jetpack 各种框架简介

Jetpack是Google推出的一套为Android开发提供极大便利的组件、工具和指导集&#xff0c;旨在帮助开发者快速构建高质量的应用&#xff0c;并遵循最佳实践。 Jetpack不仅是一个提高开发效率的工具集&#xff0c;还是Android开发的未来方向。它通过整合各种组件和工具&#xff0…
阅读更多...
Easy SSSP(sssp)

Easy SSSP(sssp)

目录 题目描述 输入 输出 样例输入 样例输出 提示 代码 今天的特邀网站&#xff1a; 和 题目描述 输入数据给出一个有 N 个节点&#xff0c;M 条边的带权有向图。要求你写一个程序&#xff0c;判断这个有向图中是否存在负权回路。如果从一个点沿着某条路径出发&#xff0c;又回…
阅读更多...
【文献阅读】COUNTGD 模型结构

【文献阅读】COUNTGD 模型结构

提出什么模块 解决什么问题 图、贡献&#xff0c;模型架构 图1 图1&#xff1a;COUNTGD能够同时使用视觉示例和文本提示来产生高度准确的对象计数&#xff08;a&#xff09;&#xff0c;但也无缝支持仅使用文本查询或仅使用视觉示例进行计数&#xff08;b&#xff09;。多模态视…
阅读更多...
Jenkins入门以及安装

Jenkins入门以及安装

本文主要讲解&#xff0c;什么是Jenkins&#xff0c;Jenkins在Linux上如何安装。因为最近在公司&#xff0c;需要安装一套测试环境&#xff0c;便想着写了此篇文章。 什么是Jenkins Jenkins是一个开源的自动化部署工具&#xff0c;它能够持续地自动化构建、测试和部署软件项目…
阅读更多...
尚品汇-前端（三十三）

尚品汇-前端（三十三）

目录&#xff1a; &#xff08;1&#xff09;面包屑处理平台属性 &#xff08;2&#xff09;排序处理 &#xff08;2&#xff09;单点登录业务介绍 &#xff08;1&#xff09;面包屑处理平台属性 前端显示&#xff1a;面包屑显示效果 搜list搜索方法继续添加返回的平台属性…
阅读更多...
零基础5分钟上手亚马逊云科技核心云架构知识 - 权限管理最佳实践

零基础5分钟上手亚马逊云科技核心云架构知识 - 权限管理最佳实践

简介&#xff1a; 欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列&#xff0c;适用于任何无云计算或者亚马逊云科技技术背景的开发者&#xff0c;通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。 我会每天介绍一个基于亚马逊云科技…
阅读更多...
信息学奥赛初赛天天练-67-NOIP2018普及组-完善程序2-计数排序、排列、链表、单向链表、双向链表

信息学奥赛初赛天天练-67-NOIP2018普及组-完善程序2-计数排序、排列、链表、单向链表、双向链表

PDF文档公众号回复关键字:20240817 1 完善程序 (单选题 &#xff0c;每小题3分&#xff0c;共30分) 最大公约数之和 对于一个 1到 n的排列 P&#xff08;即 1 到 n 中每一个数在 P中出现了恰好一次&#xff09;&#xff0c;令 q[i] 为第 i个位置之后第一个比 P[i] 值更大的位…
阅读更多...
【数学建模】趣味数模问题-状态转移模型的应用

【数学建模】趣味数模问题-状态转移模型的应用

概述 状态转移模型结合图论&#xff0c;通过经典的智力问题展示了其在求解实际问题中的巧妙应用。虽然这些问题不需要复杂的数学知识&#xff0c;但通过建立数学模型&#xff0c;可以将其转化为标准的图论模型来解决。 问题1&#xff1a;人、狼、羊、菜渡河问题 问题描述&…
阅读更多...
CUDA Out of Memory ：CUDA内存不足的完美解决方法

CUDA Out of Memory ：CUDA内存不足的完美解决方法

CUDA Out of Memory &#x1f6d1;&#xff1a;CUDA内存不足的完美解决方法 CUDA Out of Memory &#x1f6d1;&#xff1a;CUDA内存不足的完美解决方法摘要 &#x1f4dd;引言 &#x1f31f; 什么是 CUDA Out of Memory 错误&#xff1f; &#x1f914;基本定义常见场景 常见的…
阅读更多...
基于spring boot的小型诊疗预约平台的设计与开发

基于spring boot的小型诊疗预约平台的设计与开发

TOC springboot262基于spring boot的小型诊疗预约平台的设计与开发 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进…
阅读更多...
canal数据同步工具介绍与应用

canal数据同步工具介绍与应用

canal服务 canal介绍canal版本与环境canal 服务集canal应用场景&#xff1a; canal常见问题xml配置问题连接认证问题jar版本问题连接问题 canal介绍 ‌1、Canal是‌阿里巴巴开源的‌MySQL增量数据订阅和消费工具&#xff0c;通过模拟MySQL的‌slave与‌master交互&#xff0c;捕…
阅读更多...
XSS- DOMclobbering与svg深度利用

XSS- DOMclobbering与svg深度利用

目录 源码展示 解法一&#xff1a;绕过过滤-DOM clobbering 什么是DOM clobbering DOM clobbering原理 全局变量自动创建 属性名冲突 影响脚本执行 逐过程分析 源码展示 <script>const data decodeURIComponent(location.hash.substr(1));;const root documen…
阅读更多...
深度学习------------池化层

深度学习------------池化层

目录 池化层二维最大池化填充、步幅和多个通道平均池化层 总结池化层的代码部分实现池化层的正向传播验证二维最大池化层的输出该部分总代码 验证平均池化层该部分总代码 填充和步幅深度学习框架中的步幅与池化窗口的大小相同该部分总代码 填充和步幅可以手动设定该部分总代码 …
阅读更多...
adb查看当前运行的应用的包名和Activity(模拟器也可以)

adb查看当前运行的应用的包名和Activity(模拟器也可以)

adb查看当前运行的应用的包名和Activity(模拟器也可以) 在adb 中&#xff0c;输入命令&#xff1a;adb shell 进入adb模式 adb shell dumpsys window w |findstr / |findstr name 输入完成后会显示当前运行的应用的包名和Activity(模拟器也可以) 例如抖音 ** **
阅读更多...
布隆过滤器--极致的速度

布隆过滤器--极致的速度

前言 上一篇博客提到了位图&#xff0c;位图是十分高效的数据结构&#xff0c;但可惜的是只支持整型&#xff0c;今天这篇博客的主角是布隆过滤器&#xff0c;他与位图有异曲同工之妙。&#xff08;不了解位图可以点击下面这篇博客快速了解&#xff09;位图&#xff08;bitse…
阅读更多...
【初阶数据结构】链表(附题)

【初阶数据结构】链表(附题)

目录 一、顺序表的问题及思考 二、单链表 2.1链表的概念及结构 2.2.单链表的实现 2.2.1.节点的定义 2.2.2.链表的打印 2.2.3.头部插入删除/尾部插入删除 a.创建节点 b.尾插 c.头插 d.尾删 e.头删 2.2.4.查找数据 2.2.5.在指定位置之前插入数据 2.2.6删除pos节点 …
阅读更多...
rabbitmq镜像集群搭建

rabbitmq镜像集群搭建

用到的ip地址 ip地址端口192.168.101.65&#xff08;主&#xff09;15672192.168.101.7515672192.168.101.8515672 安装erlang和rabbitmq 安装 安装三个包 yum install esl-erlang_23.0-1_centos_7_amd64.rpm -y yum install esl-erlang-compat-18.1-1.noarch.rpm -y rpm -…
阅读更多...
联想电脑如何查看ip地址？详细介绍几种方法

联想电脑如何查看ip地址？详细介绍几种方法

随着互联网的普及和技术的飞速发展&#xff0c;IP地址已成为我们日常网络活动中不可或缺的一部分。无论是访问网站、远程办公还是进行网络游戏&#xff0c;IP地址都扮演着重要的角色。对于联想电脑用户来说&#xff0c;了解如何查看自己的IP地址是一项基本技能。虎观代理小二将…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023