当前位置：网站首页 > 技术分类 > 正文

Vue学习笔记之动态路由的参数传递应用及技巧

ztj100 2025-06-29 22:04 19 浏览 0 评论

路由的参数传递：

①通过params的类型

· 配置路由格式：/router/:id

· 传递的方式：在path后面跟上对应的值

· 传递后形成的路径：/router/list，/router/profile

这个就是前两篇中提到的"动态路由"中有应用过这个方法：

②通过query的类型(对象方式)：

· 配置路由格式：/router，也就是普通的配置方式配置路由即可

· 传递的方式：对象中使用query的key作为传递方式

· 传递后形成的路径：/router?id=list，/router?id=profile

正常配置路由的内容就不再重复了，在界面显示的地方需要通过一个对象来实现：

然后对象里面通过query来进行参数的传递：

<router-link v-bind:to="{path: '/profile',query: {name: 'myname', age: '16'}}" >profile</router-link>

生成的URL地址为：
http://localhost:8080/profile?name=myname&age=16

PS：注意to前面要通过v-bind来绑定变量；

query里面也是一个对象，通过给对象里面的key赋值；

URL的组成：协议：//主机：端口/路径?查询(query) #片段

scheme://host:port/path?query#fragment

最后通过$route.query在界面上打印出query的信息：

同时，我们也可以通过代码来实现页面的跳转及参数的传递：

然后通过实现点击动作完成对应组件的切换：

PS：replace里面的参数根据配置可以直接拼接为路径，如上图中的User的URL路径；也可以是对象，如上图中的profile的URL中赋值的是一个对象。

vue跳转页面携带参数

上一篇：vue中router常见的三种传参方式（vue routerlink传参）
下一篇：Vue实战053:el-menu组件实现路由导航菜单详解

Vue学习笔记之动态路由的参数传递应用及技巧

相关推荐

取消回复欢迎你发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

Vue学习笔记之动态路由的参数传递应用及技巧

相关推荐

取消回复欢迎 你 发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起