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

【Vue-Router】嵌套路由

在这里插入图片描述
footer.vue

<template><div><router-view></router-view><hr><h1>我是父路由</h1><div><router-link to="/user">Login</router-link><router-link to="/user/reg" style="margin-left: 10px;">Reg</router-link></div></div>
</template><script setup lang="ts"></script><style scoped></style>

list.json

{"data": [{"name": "面","price":300,"id": 1},{"name": "水","price":400,"id": 2},{"name": "菜","price":500,"id": 3}]}

login.vue

<template><h1>我是列表页面</h1><table cellpadding="0" class="table" border="1"><thead><tr><th>商品</th><th>价格</th><th>操作</th></tr></thead><tbody><tr :key="item.id" v-for="item in data"><th>{{ item.name }}</th><th>{{ item.price }}</th><th><button @click="toDetail(item)">详情</button></th></tr></tbody></table>
</template><script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';const router = useRouter()type Item = {name: string;price: number;id: number;
}const toDetail = (item: Item) => {router.push({// name 对应 router 的 namename: 'Reg',// 不会展示在URL上,存在于内存里params: {id: item.id}})
}
</script><style scoped>
.table {width: 400px;
}
</style>

reg.vue

<template><h1>我是列表页面</h1><button @click="router.back()">返回</button><div style="font-size: 20px;">品牌:{{ item?.name }}</div><div style="font-size: 20px;">价格:{{ item?.price }}</div><div style="font-size: 20px;">id: {{ item?.id }}</div>
</template><script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { data } from './list.json';const router = useRouter();
const route = useRoute();
// 返回对象用item接收
console.log(route);const item = data.find(v => v.id === Number(route.params.id))</script><style scoped>
.reg {background-color: green;height: 400px;width: 400px;font-size: 20px;color: white;
}
</style>

index.ts

import { createRouter, createWebHistory, RouteRecordRaw,  } from "vue-router";const routes: Array<RouteRecordRaw> = [{path: "/user",component: () => import("../components/footer.vue"),children:[{path: "",name: 'Login',component: () => import("../components/login.vue")},{path: "reg",name: 'Reg',component: () => import("../components/reg.vue")}]},
]const router = createRouter({history: createWebHistory(),routes
})export default router

App.vue

<template><h1>hello world</h1><hr><router-view></router-view>
</template><script setup lang="ts"></script><style scoped></style>

在这里插入图片描述
在这里插入图片描述

相关文章:

【Vue-Router】嵌套路由

footer.vue <template><div><router-view></router-view><hr><h1>我是父路由</h1><div><router-link to"/user">Login</router-link><router-link to"/user/reg" style"margin-left…...

MySQL索引总结

MySQL索引总结 1.索引的概念、作用与使用场景 本质上就是减少读写磁盘的次数。 索引是一种特殊的文件&#xff0c;包含这对数据表中所有记录的引用指针&#xff0c;可以对表中的一列或多列创建索引&#xff0c;并指定索引的类型&#xff0c;每种类型都有对应数据结构实现。 …...

谷粒商城第十二天-基本属性销售属性管理功能的实现

目录 一、总述 二、前端部分 三、后端部分 四、总结 一、总述 前端的话&#xff0c;依旧是直接使用老师给的。 前端的话还是那些增删改查&#xff0c;业务复杂一点的话&#xff0c;无非就是设计到多个字段多个表的操作&#xff0c;当然这是后端的事了&#xff0c;前端这里…...

利用安全区域的概念解决移动端兼容不同手机刘海的问题

移动端 安全区 在做移动端的项目时&#xff0c;由于不同的手机设备设置的不同&#xff0c;有些手机在上方有刘海的设计&#xff0c;我们需要做适配&#xff0c;即把想要展示的内容放在安全区域内展示。 1.自定义导航栏 在pages.json中修改如下配置 {"path":"…...

数据结构---图

这里写目录标题 图的基本概念和术语基本概念和术语1基本概念和术语2 图的类型定义抽象数据类型定义二级目录二级目录 一级目录二级目录二级目录二级目录二级目录二级目录二级目录 图的基本概念和术语 基本概念和术语1 V代表顶点的有穷非空集合 E代表边的有穷集合 n为顶点 有向…...

励志长篇小说《周兴和》书连载之十八 内外交困搞发明

内外交困搞发明 路灯发出昏黄而惺忪的光影。 周兴和疲惫地从车间出来&#xff0c;拖着沉重的腿爬上几级石阶&#xff0c;准备回到家里去。可走到家门口&#xff0c;他想了想&#xff0c;又折了回去&#xff0c;在车间的一条长条椅子上&#xff0c;他用一块试验用的废料当枕头&…...

web基础入门和php语言基础入门 二

web基础入门和php语言基础入门 二 MySQL入门-续MySQL之数据查询操作MySQL其他知识点 php语言基础入门认识PHPPHP的工作流程安装PHP环境认识一个PHP程序PHP基础知识点进入正题 PHP与WEB交互PHP与MySQL交互总结 MySQL入门-续 MySQL之数据查询操作 WHERE 子句&#xff0c;条件限…...

typeScript 之 Array

工具: PlayGround 源码&#xff1a;GitHub TypeScript 数组简介 在TypeScript中&#xff0c; 使用[]表示数组&#xff0c; 它的结构&#xff1a;let valus: 类型名[] 数据; // 数字 let numList: number[] [1, 2, 3]; // 字符串 let strList: string[] ["hello"…...

【题解】二叉树的前中后遍历

文章目录 二叉树的前序遍历二叉树的中序遍历二叉树的后序遍历 二叉树的前序遍历 题目链接&#xff1a;二叉树的前序遍历 解题思路1&#xff1a;递归 代码如下&#xff1a; void preorder(vector<int>& res, TreeNode* root){if(root nullptr) return;//遇到空节点…...

文件操作/IO

文件 文件是一种在硬盘上存储数据的方式&#xff0c;操作系统帮我们把硬盘的一些细节都封装起来了&#xff0c;程序员只需要了解文件相关的接口即可&#xff0c;相当于操作文件就是间接的操作硬盘了 硬盘用来存储数据&#xff0c;和内存相比硬盘的存储空间更大&#xff0c;访问…...

基于Java+SpringBoot+vue前后端分离共享汽车管理系统设计实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

Mac RN环境搭建

RN ios android原生环境搭建有时候是真恶心&#xff0c;电脑环境不一样配置也有差异。 我已经安装官网的文档配置了ios环境 执行 npx react-nativelatest init AwesomeProject 报错 然后自己百度查呀执行 gem update --system 说是没有权限&#xff0c;执行失败。因为Mac…...

log4j教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Log4j是Apache的一个开源项目&#xff0c;通过使用Log4j&#xff0c;我们可以控制日志信息输送的目的地是控制台、文件、GUI组件&#xff0c;甚至是套接口服务器、NT的事件记录器、UNIX Syslog守护进程等&#xff1b;我们也可以控制每一条日志的输出格式&#xff1b;…...

DP——背包问题

DP——背包问题 01背包问题分数背包问题多重背包问题完全背包问题 当我们谈论背包问题时&#xff0c;可以想象成一个小朋友要去旅行&#xff0c;但是他只能带一个容量有限的背包。他有一些物品可以选择放入背包&#xff0c;每个物品都有自己的重量和价值。小朋友的目标是在不超…...

【从零学习python 】29. 「函数参数详解」——了解Python函数参数的不同用法

文章目录 函数参数详解一、缺省参数二、不定长参数三、缺省参数在*args后面可变、不可变类型总结 进阶案例 函数参数详解 一、缺省参数 调用函数时&#xff0c;缺省参数的值如果没有传入&#xff0c;则取默认值。 下例会打印默认的age&#xff0c;如果age没有被传入&#xf…...

10个经典战略分析模型,助力洞察市场明确优势

在企业的经营管理过程中&#xff0c;要时刻清晰内外部环境和自身的优劣势&#xff0c;做好企业略规划&#xff0c;进行企业内外部资源的分析&#xff0c;对经营环境&#xff0c;企业核心竞争力有足够的判断&#xff0c;才能明确企业的发展方向。本文为大家分享10个常用的战略分…...

C++(Qt)软件调试---将调试工具安装到AeDebug(11)

C(Qt)软件调试—将调试工具安装到AeDebug&#xff08;11&#xff09; 文章目录 C(Qt)软件调试---将调试工具安装到AeDebug&#xff08;11&#xff09;1、前言1.1 使用的调试工具 2、调试器安装1.1 WinDbg1.2 procdump1.3 DrMinGW1.4 vsjitdebugger 更多精彩内容&#x1f449;个…...

浅谈限流式保护器在住宅电气防火的应用

安科瑞 华楠 【摘要】随着人民生活水平的提高&#xff0c;家用大功率电器普遍被使用&#xff0c;导致用电量剧增&#xff0c;电气火灾频发。文章分析了电气火灾发生的原因&#xff0c;并时电气火灾的防范措施进行了探讨。 【关键词】电气火灾&#xff1b;原因&#xff1b;防范…...

ChatGPT助力ModStartBlog,博客写作更智能

ModStartBlog v7.1.0&#xff0c;ChatGPT 支持、界面全新优化 在数字化时代&#xff0c;博客已经成为人们分享知识、表达观点和建立个人品牌的重要工具。ModStartBlog是一款流行的博客平台&#xff0c;其最新的版本v7.1.0不仅增加了ChatGPT支持&#xff0c;还对界面进行了全新…...

Jpa与Druid线程池及Spring Boot整合(二): spring-boot-starter-data-jpa 踏坑异常处理方案

Jpa与Druid线程池及Spring Boot整合(一) Jpa与Druid线程池及Spring Boot整合(二)&#xff1a;几个坑 附录官网文档&#xff1a;core.domain-events域事件 从聚合根发布事件 存储库管理的实体是聚合根。在领域驱动设计应用程序中&#xff0c;这些聚合根通常会发布领域事件。Sp…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...