vue-参数传递
之前学习过动态路由的参数传递,属于URL占位符的方式,取的话是通过$route.params来取的;其实还有一种参数传递的方式,就是传统的URL后面跟着参数的形式,话不多说,还是写代码吧:
<template> <div id="nav"> <router-link :to="{path: '/profile',query: {name: 'zhangsan',age: 89}}">Profile</router-link> </div> <router-view/> </template>
到时候点击该路由链接时,在地址栏的路径是这样的:
http://localhost:8080/profile?name=zhangsan&age=89
要想取到这里面的参数,在跳转的组件里,得通过$route.query的方式,如下:
<template> <div> <h1>我是Profile</h1> <h1>接收到的参数{{$route.query.name}}</h1> <h1>接收到的参数{{$route.query.age}}</h1> </div> </template>
其实就差不多这些了,但还得讲一个关于代码的路由跳转的方式,之前代码的路由跳转是这样的:
this.$router.push('/profile')
其实还有一种对象字面量的写法:
this.$router.push({ path: '/profile', query: { name: 'zhangsan', age: 18 } })
这种方式也能跳转到对应的路径,并且该写法可读性更好,用得也挺多的
总结吧:如果是RestFul风格的参数传递且参数较少,那就是params的用法;若还是传统且参数较多的方式,那就是query
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
2020-04-01 JavaSE-IO概述