【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.索引的概念、作用与使用场景 本质上就是减少读写磁盘的次数。 索引是一种特殊的文件,包含这对数据表中所有记录的引用指针,可以对表中的一列或多列创建索引,并指定索引的类型,每种类型都有对应数据结构实现。 …...
谷粒商城第十二天-基本属性销售属性管理功能的实现
目录 一、总述 二、前端部分 三、后端部分 四、总结 一、总述 前端的话,依旧是直接使用老师给的。 前端的话还是那些增删改查,业务复杂一点的话,无非就是设计到多个字段多个表的操作,当然这是后端的事了,前端这里…...
利用安全区域的概念解决移动端兼容不同手机刘海的问题
移动端 安全区 在做移动端的项目时,由于不同的手机设备设置的不同,有些手机在上方有刘海的设计,我们需要做适配,即把想要展示的内容放在安全区域内展示。 1.自定义导航栏 在pages.json中修改如下配置 {"path":"…...
数据结构---图
这里写目录标题 图的基本概念和术语基本概念和术语1基本概念和术语2 图的类型定义抽象数据类型定义二级目录二级目录 一级目录二级目录二级目录二级目录二级目录二级目录二级目录 图的基本概念和术语 基本概念和术语1 V代表顶点的有穷非空集合 E代表边的有穷集合 n为顶点 有向…...
励志长篇小说《周兴和》书连载之十八 内外交困搞发明
内外交困搞发明 路灯发出昏黄而惺忪的光影。 周兴和疲惫地从车间出来,拖着沉重的腿爬上几级石阶,准备回到家里去。可走到家门口,他想了想,又折了回去,在车间的一条长条椅子上,他用一块试验用的废料当枕头&…...
web基础入门和php语言基础入门 二
web基础入门和php语言基础入门 二 MySQL入门-续MySQL之数据查询操作MySQL其他知识点 php语言基础入门认识PHPPHP的工作流程安装PHP环境认识一个PHP程序PHP基础知识点进入正题 PHP与WEB交互PHP与MySQL交互总结 MySQL入门-续 MySQL之数据查询操作 WHERE 子句,条件限…...
typeScript 之 Array
工具: PlayGround 源码:GitHub TypeScript 数组简介 在TypeScript中, 使用[]表示数组, 它的结构:let valus: 类型名[] 数据; // 数字 let numList: number[] [1, 2, 3]; // 字符串 let strList: string[] ["hello"…...
【题解】二叉树的前中后遍历
文章目录 二叉树的前序遍历二叉树的中序遍历二叉树的后序遍历 二叉树的前序遍历 题目链接:二叉树的前序遍历 解题思路1:递归 代码如下: void preorder(vector<int>& res, TreeNode* root){if(root nullptr) return;//遇到空节点…...
文件操作/IO
文件 文件是一种在硬盘上存储数据的方式,操作系统帮我们把硬盘的一些细节都封装起来了,程序员只需要了解文件相关的接口即可,相当于操作文件就是间接的操作硬盘了 硬盘用来存储数据,和内存相比硬盘的存储空间更大,访问…...
基于Java+SpringBoot+vue前后端分离共享汽车管理系统设计实现
博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…...
Mac RN环境搭建
RN ios android原生环境搭建有时候是真恶心,电脑环境不一样配置也有差异。 我已经安装官网的文档配置了ios环境 执行 npx react-nativelatest init AwesomeProject 报错 然后自己百度查呀执行 gem update --system 说是没有权限,执行失败。因为Mac…...
log4j教程_编程入门自学教程_菜鸟教程-免费教程分享
教程简介 Log4j是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台、文件、GUI组件,甚至是套接口服务器、NT的事件记录器、UNIX Syslog守护进程等;我们也可以控制每一条日志的输出格式;…...
DP——背包问题
DP——背包问题 01背包问题分数背包问题多重背包问题完全背包问题 当我们谈论背包问题时,可以想象成一个小朋友要去旅行,但是他只能带一个容量有限的背包。他有一些物品可以选择放入背包,每个物品都有自己的重量和价值。小朋友的目标是在不超…...
【从零学习python 】29. 「函数参数详解」——了解Python函数参数的不同用法
文章目录 函数参数详解一、缺省参数二、不定长参数三、缺省参数在*args后面可变、不可变类型总结 进阶案例 函数参数详解 一、缺省参数 调用函数时,缺省参数的值如果没有传入,则取默认值。 下例会打印默认的age,如果age没有被传入…...
10个经典战略分析模型,助力洞察市场明确优势
在企业的经营管理过程中,要时刻清晰内外部环境和自身的优劣势,做好企业略规划,进行企业内外部资源的分析,对经营环境,企业核心竞争力有足够的判断,才能明确企业的发展方向。本文为大家分享10个常用的战略分…...
C++(Qt)软件调试---将调试工具安装到AeDebug(11)
C(Qt)软件调试—将调试工具安装到AeDebug(11) 文章目录 C(Qt)软件调试---将调试工具安装到AeDebug(11)1、前言1.1 使用的调试工具 2、调试器安装1.1 WinDbg1.2 procdump1.3 DrMinGW1.4 vsjitdebugger 更多精彩内容👉个…...
浅谈限流式保护器在住宅电气防火的应用
安科瑞 华楠 【摘要】随着人民生活水平的提高,家用大功率电器普遍被使用,导致用电量剧增,电气火灾频发。文章分析了电气火灾发生的原因,并时电气火灾的防范措施进行了探讨。 【关键词】电气火灾;原因;防范…...
ChatGPT助力ModStartBlog,博客写作更智能
ModStartBlog v7.1.0,ChatGPT 支持、界面全新优化 在数字化时代,博客已经成为人们分享知识、表达观点和建立个人品牌的重要工具。ModStartBlog是一款流行的博客平台,其最新的版本v7.1.0不仅增加了ChatGPT支持,还对界面进行了全新…...
Jpa与Druid线程池及Spring Boot整合(二): spring-boot-starter-data-jpa 踏坑异常处理方案
Jpa与Druid线程池及Spring Boot整合(一) Jpa与Druid线程池及Spring Boot整合(二):几个坑 附录官网文档:core.domain-events域事件 从聚合根发布事件 存储库管理的实体是聚合根。在领域驱动设计应用程序中,这些聚合根通常会发布领域事件。Sp…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
