当前位置:首页 > 技术文章 > 正文内容

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

zonemu3个月前 (07-12)技术文章36

路由的参数传递:

①通过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基础组件文件名符合规范的是)

Vue 是什么,它的核心特点有哪些?Vue 是一款渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助开发者用...

vue3-内置组件-Teleport(vue内置指令有哪些)

Teleport<Teleport> 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。基本用法有时我们可能会遇到这样的场景:一个组件模板的一部...

Web前端全套教程+视频包含JavaScript、Vue等

写在前面:web前端从入门到精通经典教程,老师精心讲,想从事编程或者数据分析行业的小伙伴点进来,只需你评论并关注私信留言“前端”。便可免费获取。WEB前端简介:WEB前端工程师,也叫Web前端开发工程...

HTML5培训的学习大纲

第一阶段前端开发基础:1.HTML标签语言(xhtml+html5)行业介绍,本地环境配置,sublime编辑器学习使用,制作html标准模板,css基础,html常用标签(一),html常用标签(二...

HTML5与APP的抉择(h5与app的区别)

同为当下炙手可热的技术,围绕APP和HTML5难免少不了各种争辩。而在“互联网+”时代,许多面临转型的传统企业,也在选择转型工具时,陷入了HTML5或APP的纠结抉择之中……到底该选择HTML5还是A...

2025最值得入手的AI数据分析工具:奥威BI深度评测报告

一、引言在数字化时代,数据已成为企业决策的重要依据。然而,海量数据的处理与分析往往耗费大量时间与精力。为此,AI数据分析工具应运而生,其中奥威BI作为一款备受瞩目的产品,凭借其强大的功能与智能特性,成...