当前位置: 首页 > news >正文

菜鸟学习vue3笔记-vue3 router回顾

1、路由router

pnpm i  vue-router

2、创建使用环境

1.src下创建 router文件夹、里面创建index.ts文件
//创建一个路由暴露出去//1.引入createRouter
import { createRouter, createWebHistory } from "vue-router";// import Home  from '../components/Home.vue'// import Goods from '../components/Goods.vue'
// import Mine from "../components/Mine.vue";//2.创建路由器
const router = createRouter({history: createWebHistory(),routes: [{path: "/home",component: ()=>import ("../components/Home.vue"),// component:Home},{path: "/goods",component: ()=>import('../components/Goods.vue'),// component:Goods},{path: "/mine",component: ()=>import('../components/Mine.vue'),// component:Mine},{path:'/',redirect:'/home',}],
});
export default router
2.main.ts文件中配置
//引入路由器import router from './router'const app=createApp(App)//使用路由器app.use(router)

3.页面中使用 RouterView, RouterLink

<template><div class="box"><div class="nav-box"><RouterLink to="/home">首页</RouterLink><RouterLink to="/goods">商品</RouterLink><RouterLink to="/mine">我的</RouterLink></div><div class="content-box"><RouterView></RouterView></div></div>
</template><script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
</script><style lang="scss" scoped>
.box {.nav-box {background-color: red;// border: 1px solid #00ff00;display: flex;> a {flex: 1;border: 1px solid #00ff00;text-align: center;}}
}
</style>

to 的两种写法

<RouterLink to="/home">首页</RouterLink><RouterLink to="/goods">商品</RouterLink><RouterLink to="/mine">我的</RouterLink>
<RouterLink:to="{path: '/mine',}">我的</RouterLink>

命名路由

{path: "/home",name:'homePage',component: ()=>import ("../pages/Home.vue"),// component:Home},{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'/detial',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},{path: "/mine",name:'mine',component: ()=>import('../pages/Mine.vue'),// component:Mine},<RouterLink:to="{name: 'mine',}">我的</RouterLink>

嵌套路由

  {path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<template><div class="box"><div class="left"><ul><li v-for="(item, index) in goods" :key="index"><RouterLink to="/goods/detial"> {{ item }}</RouterLink></li></ul></div><div class="right"><RouterView></RouterView></div></div>
</template>
query 传参
  <!-- 第一种写法 --><RouterLink :to="`/goods/detial?index=${index}&title=${item}`">{{ item }}</RouterLink><!-- 第二种写法 --><RouterLink:to="{path: '/goods/detial',query: {index: index,title: item,},}">{{ item }}</RouterLink><!-- <template><div>商品详情{{ router.query.index }}---{{ router.query.title }}</div>
</template> -->
<template><div>商品详情{{ query.index }}---{{ query.title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();// console.log(useRoute().query);let { query } = toRefs(router);// let { index, title } = toRefs(useRoute().query);
</script><style lang="scss" scoped></style>
params 传参
 {path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<router-link :to="`/goods/detial/${index}/${item}`">{{ item }}</router-link><template><div>商品详情{{ params.index }}---{{ params.title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();console.log(router);let { params } = toRefs(router);
//这种写法必须写name path报错
{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title',name:'xiangqing',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<!-- 第二种写法 --><router-link:to="{// path: '/goods/detial', //path 会报错name: 'xiangqing',params: {index: index,title: item,},}">{{ item }}</router-link>

路由组件props(params 传参)

{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title?',name:'xiangqing',props:true, //开启 只处理params参数component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<template><div>商品详情{{ index }}---{{ title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";defineProps(["index", "title"]);//接受属性
// import { useRoute } from "vue-router";
// let router = useRoute();// console.log(router);// let { params } = toRefs(router);// let { index, title } = toRefs(useRoute().query);
</script><style lang="scss" scoped></style>

query传参 这样设置

props(router){return router.query},

编程式导航

router-link 本质是a 标签<script setup lang="ts">
import { onMounted } from "vue";import { useRouter } from "vue-router";let router = useRouter();onMounted(() => {setTimeout(() => {router.push("/mine");}, 3000);
});<button @click="lookDetail(item, index)">点击查看</button>let lookDetail = (item, index) => {router.push({name: "xiangqing",params: {index: index,title: item,},});
};

相关文章:

菜鸟学习vue3笔记-vue3 router回顾

1、路由router pnpm i vue-router2、创建使用环境 1.src下创建 router文件夹、里面创建index.ts文件 //创建一个路由暴露出去//1.引入createRouter import { createRouter, createWebHistory } from "vue-router";// import Home from ../components/Home.vue//…...

Mybatis枚举类型处理和类型处理器

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…...

2023 NCTF writeup

CRYPTO Sign 直接给了fx,gx&#xff0c;等于私钥给了&#xff0c;直接套代码&#xff0c;具体可以参考&#xff1a; https://0xffff.one/d/1424 fx [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…...

golang的大杀器协程goroutine

在Golang中&#xff0c;协程&#xff08;Goroutine&#xff09;是轻量级的执行单元&#xff0c;用于实现并发编程。它是Golang语言的重要组成部分&#xff0c;提供了简洁、高效的方式来处理并发任务。 特点&#xff1a; 1&#xff09;轻量级&#xff1a;Go语言的协程是轻量级…...

[Angular] 笔记 9:list/detail 页面以及@Output

1. Output input 好比重力&#xff0c;向下传递数据&#xff0c;list 传给 detail&#xff0c;smart 组件传给 dumb 组件&#xff0c;父组件传给子组件。input 顾名思义&#xff0c;输入数据给组件。 output 与之相反&#xff0c;好比火箭&#xff0c;向上传递数据或事件。ou…...

Linux学习笔记(一)

如果有自己的物理服务器请先查看这篇文章 文章目录 网卡配置Linux基础指令ls:列出目录内容cd(mkdir.rmkdir): 切换文件夹(创建,删除操作)cp:复制文件或目录mv:文件/文件夹移动cat:查看文件vi:文件查看编辑man:查看命令手册more: 查看文件内容less : 查看文件内容 ps: 显示当前进…...

Python 爬虫 教程

python爬虫框架&#xff1a;Scrapyd&#xff0c;Feapder&#xff0c;Gerapy 参考文章&#xff1a; python爬虫工程师&#xff0c;如何从零开始部署ScrapydFeapderGerapy&#xff1f; - 知乎 神器&#xff01;五分钟完成大型爬虫项目 - 知乎 爬虫框架-feapder - 知乎 scrap…...

uniapp原生插件 - android原生插件打包流程 ( 避坑指南一)

【彩带- 避坑知识点】: 当时开发中安卓插件打包成功后&#xff0c;uniapp引用插件aar&#xff0c;用云打包 &#xff0c;总是提示不包含插件。原因是因为module的androidManifest.xml文件没有注册activity。 这一步 很重要&#xff0c;一定要注册。 --------------------------…...

搭建maven私服

maven maven简介 什么是maven&#xff1f; Maven这个单词来自于意第绪语&#xff08;犹太语&#xff09;&#xff0c;意为知识的积累。 Maven项目对象模型(POM)&#xff0c;可以通过一小段描述信息来管理项目的构建&#xff0c;报告和文档的项目管理工具软件。 Maven 除了以…...

EST-100身份证社保卡签批屏按捺终端PC版web版本http协议接口文档,支持web网页开发对接使用

<!DOCTYPE html><html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-scale1.0"><title>演示DEMO</title><script type"text/…...

基于SpringBoot的毕业论文管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的毕业论文管理系统,java…...

iToF人脸识别

iToF(间接飞行时间)是一种测量光飞行时间的技术,主要应用于人脸识别。 iToF人脸识别技术在哪些场景下会用到 iToF人脸识别技术可以应用于许多场景,以下是一些常见的应用场景: 平安城市:在城市监控系统中,iToF人脸识别技术可以用于实时监控、目标检测和识别,以及异常行为…...

Django开发3

Django开发3 Django开发编辑用户9.靓号管理9.1 表结构9.2 靓号列表9.3 新建靓号9.4 编辑靓号9.5 搜索手机号9.6 分页 10.时间插件11.ModelForm和BootStrap操作 各位小伙伴想要博客相关资料的话关注公众号&#xff1a;chuanyeTry即可领取相关资料&#xff01; Django开发 部门管…...

MS2358:96KHz、24bit 音频 ADC

产品简述 MS2358 是带有采样速率 8kHz-96kHz 的立体声音频模数 转换器&#xff0c;适合于面向消费者的专业音频系统。 MS2358 通过使用增强型双位 Δ - ∑ 技术来实现其高精度 的特点。 MS2358 支持单端的模拟输入&#xff0c;所以不需要外部器 件&#xff0c;非常适…...

【Android12】Android Framework系列---tombstone墓碑生成机制

tombstone墓碑生成机制 Android中程序在运行时会遇到各种各样的问题&#xff0c;相应的就会产生各种异常信号&#xff0c;比如常见的异常信号 Singal 11&#xff1a;Segmentation fault表示无效的地址进行了操作&#xff0c;比如内存越界、空指针调用等。 Android中在进程(主要…...

中间件系列 - Redis入门到实战(原理篇)

前言 学习视频&#xff1a; 黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 中间件系列 - Redis入门到实战 本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 学习目标 Redis数据结构Redis网…...

P2249 【深基13.例1】查找

P2249 【深基13.例1】查找 P2249 【深基13.例1】查找 题意 输入n 个不超过10的9次方的单调不减的&#xff08;就是后面的数字不小于前面的数字&#xff09;非负整数a1&#xff0c;a2&#xff0c;a3…然后进行 m 次询问。对于每次询问&#xff0c;给出一个整数q&#xff0c;要…...

linux常用shell脚本

查看系统当前进程连接数 netstat -an | grep ESTABLISHED | wc -l 如何在/usr目录下找出大小超过10MB的文件? find /usr -type f -size 10240k 添加一条到192.168.3.0/24的路由&#xff0c;网关为192.168.1.254&#xff1f; route add -net 192.168.3.0/24 netmask 255.2…...

Rust学习笔记005:结构体 struct

在 Rust 中&#xff0c;struct 是一种用于创建自定义数据类型的关键字&#xff0c;它允许你定义和组织数据的结构。struct 可以包含多个不同类型的字段&#xff08;fields&#xff09;&#xff0c;每个字段都有一个名称和一个类型。 定义结构体 下面是一个简单的例子&#xff…...

maven中dependencyManagement标签

简介 dependencyManagement正如其名&#xff0c;用于项目依赖的统一管理。 在父项目中的pom.xml文件中加入dependencyManagement标签即可完成依赖版本的声明。在声明完成后&#xff0c;子项目&#xff08;module&#xff09;中引用相同的依赖时可以不指定version标签自动引入…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...