Day30_路由的query参数

最新推荐文章于 2024-08-19 17:04:41 发布
最新推荐文章于 2024-08-19 17:04:41 发布
阅读量605 收藏
点赞数 1
分类专栏： router vue 加强学习 文章标签： 前端 route vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59110215/article/details/127132126
版权
加强学习 同时被 3 个专栏收录
128 篇文章 0 订阅
订阅专栏
vue
110 篇文章 1 订阅
订阅专栏
router
17 篇文章 0 订阅
订阅专栏

1.我在Message.vue里面写的数据太假了，我想让这些东西是真正拿数据遍历出来的

 

2.有人会有想法  那么这个消息001   ，消息002    ，消息003   肯定又要写三个路由组件作为导航区 

3.在index.js里面

 

4.目前的Detail.vue

 

5.目前的Message.vue里面

 

6.目前的效果图：

 

7.跳转的时候带点参数过去

1》图片分析

 2》探寻Detail组件里面的this.$route里面有什么？

 3》我们需要拿数据的时候

4》目前可以拿到写死的数据

 

5》如果想拿到  灵活的数据 

第一种写法（to 的字符串写法）

 

 第二种写法（to 的对象写法）    推荐写法

 总结：

 

好好学习，非常重要的
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day06小说网站雏形.rar
08-21
3. **数据库查询语言**：开发人员可能会使用SQL（Structured Query Language）来操作这个数据库，包括插入新书、更新信息、删除书籍以及检索用户请求的数据。 4. **Web开发框架**：为了构建小说网站，开发可能使用...
react-query-example:用CodeSandbox创建
04-20
使用next/link您可以使用通用路由功能在它们之间添加超链接。 day目录显示您可以具有子目录。自己部署使用部署示例：如何使用使用或执行以引导示例： npx create-next-app --example hello-world hello-world-app# ...
Day30_路由的params参数
qq_59110215的博客
10-01 58
卷
Day07_路由_vant组件库使用
无
10-17 300
文章目录 Day07_路由_vant组件库使用 知识点自测 今日学习目标 1. vue路由简介和基础使用 1.0 什么是路由 1.1 为什么使用路由 1.2 vue-router介绍 1.3 路由 - 组件分类 1.4 vue-router使用 2. vue路由 - 声明式导航 2.0 声明式导航 - 基础使用 2.1 声明式导航 - 跳转传参 3. vue路由 - 重定向和模式 3.0 路由 - 重定向 3.1 路由 - 404页面 3.2 路由 - 模式设置 4. vue路由 - 编程式导航 4.0 编
Vue基础学习笔记Day06_路由
Li9527999qq的博客
05-04 354
今日目标: 能够了解单页面应用概念和优缺点 能够掌握vue-router路由系统使用 能够掌握链接导航和编程式导航用法 能够掌握路由嵌套和路由守卫 能够掌握vant组件库基础使用 学习内容： 学习目录: vue路由简介和基础使用 vue路由 - 声明式导航 vue路由 - 重定向和模式 vue路由 - 编程式导航 vue路由 - 嵌套和守卫 今日总结 面试题 知识点自测 url的组成部分都有哪些, hash值指的什么 1. vue路由简介和基础使用 1.0 什么是路由 目标: 设备和ip的映射
day05_vue路由(1)
weixin_60651472的博客
08-14 575
.。。。。。。。。。
day05_vue路由
qq_33820545的博客
08-17 229
文章目录1.路由的概念2.前端路由的初体验3.Vue Router简介4.Vue Router的使用步骤(★★★)5.嵌套路由，动态路由的实现方式A.嵌套路由的概念(★★★)B.动态路由匹配(★★★)7.命名路由以及编程式导航A.命名路由：给路由取别名B.编程式导航(★★★)8.实现后台管理案例(★★★) 1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由，动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管理案例 1
全局路由守卫url地址中获取query参数的某一键值对
weixin_56335924的博客
12-14 390
url地址中获取query参数的某一键值对
Day02 -尚品汇-路由传递参数
qq_59110215的博客
10-10 256
卷
Day07_核心问题
无
10-17 225
Day07\_核心问题
前端Day12----路由传参的两种方法（query，params）
Mi_Ni_BoX的博客
05-22 654
路由传参的两种方法（query，params）
vue大型电商项目尚品汇（前台篇）day05.doc
07-09
传递参数可以通过 query 或者 params 传递过去，但是一些复杂的数据比如数组、对象等这些用 url 传过去就不太好了，可以通过 sessionStorage 或者 localStorage 来传递。有了这些参数，就可以动态展示数据了。 4. ...
171208_gshop:Vue项目-硅谷外卖
05-17
$route: 当前路由对象, 一些当前路由信息数据的容器, path/meta/query/params 项目路由拆分 底部导航组件: FooterGuide 导航路由组件: Msite/Search/Order/Profile 4. 抽取组件 头部组件: HeaderTop, 通
课件.rar
02-12
12. **Day17-18**: 路由与导航，掌握Navigator、Routes、BottomNavigationBar的使用。 13. **Day19**: 插件开发，理解如何创建自定义插件，实现平台间的交互。 14. **Day20**: 测试，编写单元测试和集成测试，确保...
前端字符串将其分割成长度为 32 的子字符串数组
最新发布
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 107
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
pywebview 入门
小小宾的博客
08-18 621
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
web前端之html弹窗面板的popover新属性
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-18 3636
web前端之html弹窗面板的popover新属性
CORS error && 302 Found
zcxbd的博客
08-19 42
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
java nextday_Nextday 参数化单元测试（测试用例）设计
06-12
为了设计参数化单元测试用例，您可以考虑使用JUnit框架提供的Parameterized Runner。下面是一个示例： ```java @RunWith(Parameterized.class) public class NextDayTest { @Parameters(name = "{index}: nextDay({0})={1}") public static Collection<Object[]> data() { return Arrays.asList(new Object[][] { { "2019-01-01", "2019-01-02" }, { "2019-02-28", "2019-03-01" }, { "2019-12-31", "2020-01-01" }, { "2020-02-29", "2020-03-01" } }); } private String inputDate; private String expectedNextDay; public NextDayTest(String inputDate, String expectedNextDay) { this.inputDate = inputDate; this.expectedNextDay = expectedNextDay; } @Test public void testNextDay() { assertEquals(expectedNextDay, nextDay(inputDate)); } private String nextDay(String date) { // 实现计算下一天的逻辑 } } ``` 在上述示例中，我们使用`@RunWith(Parameterized.class)`注解来告诉JUnit使用Parameterized Runner来运行测试。然后，我们定义了一个静态方法`data()`，该方法返回一个包含测试数据的集合。在这个方法中，我们可以定义多个测试用例，每个测试用例都是一个对象数组，包含输入参数和期望结果。 接下来，我们定义了两个私有成员变量`inputDate`和`expectedNextDay`，它们分别用于存储当前测试用例的输入参数和期望结果。在测试类的构造函数中，我们将这些变量初始化为当前测试用例的值。 最后，在测试方法`testNextDay()`中，我们调用`nextDay()`方法计算实际结果，并使用`assertEquals()`方法来比较实际结果和期望结果是否相等。在比较结果时，我们使用了`@Parameters(name = "{index}: nextDay({0})={1}")`注解来指定测试用例的名称，以便在测试报告中更好地显示测试结果。 当您运行此测试类时，JUnit会自动运行所有测试用例，并为每个测试用例输出测试结果。这样，您就可以轻松地设计参数化单元测试用例，并确保代码的正确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值