46. Vue路由传参的基本使用
时间:2022-07-22
本文章向大家介绍46. Vue路由传参的基本使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
上一章节讲解了vue-router
的基本使用,本章节来开始看看如何在路由中设置参数。
那么其中路由传递的参数有两种方式,如下:
- 使用query的方式传递参数,例如:
/login?id=1
- 使用params的方式传递参数, 例如:
/login/1
使用query的方式传递参数
那么继续使用上一篇的例子,给设置router-link
的路径设置参数。
1.设置query方式的参数
设置参数的id=10,下面来到浏览器看看,如下:
或者直接在console
中输入vm
,如下:
都可以看到参数的id已经被探测到了。
2.打印query的参数
在组件的生命周期函数created
中打印this.$route
对象,如下:
那么如果需要打印出id
的数据,只要这样写就可以了this.$route.query.id
,下面来试试。
浏览器打印参数如下:
好了,可以看到已经成功打印出参数了。
3.打印多个query参数
浏览器打印query的多个参数,如下:
可以从上面看到,已经可以获取多个query的参数了。那么如何在模板中使用呢?
4.在模板中打印query参数
浏览器显示如下:
可以看到在模板中是可以直接用this.$route
来获取参数的,其中在模板还可以省略this
,如下:
浏览器显示正常,如下:
使用params的方式传递参数
1.在路由routes规则处设置params的参数规则
params设置参数的路径示例:/register/:参数
上面这里先设置单个参数看看。
2.在注册的router-link
设置传递的params
参数
<router-link to="/register/10">注册</router-link>
可以看到,这里设置传递的参数为10,也就是id=10
3.在调试模式查看传递的params参数
那么能不能设置多个参数呢?
4.在路由routes规则处设置多个params参数
6.在注册的router-link
设置传递多个params参数
7.在调试模式查看传递的多个params参数
那么可以看到params
已经有多个参数值了。
8.在模板中使用params
参数
在浏览器显示如下:
可以看到已经可以在模板中展示params的参数了。
9.查看路径参数params的正则匹配规则
- 使用selenium模块模拟浏览器爬去网页,并进行点击定位内容笔记
- python 报错'gbk' codec can't encode character 'ue5d1' in position 0:
- python文件打开方式详解——a、a+、r+、w+区别
- 三封报警邮件的分析(r6笔记第95天)
- HCTF2017 部分 Web 出题思路详解
- 基于springboot+kotlin+gradle构建的框架的坑
- 创建Task的多种方法
- 运行map()后,报:<map object at 0x02629E50>解决方法与原因分析
- Gradle的快速入门
- Python笔记从html中提取字段
- 一条细小的报警短信的处理(r6笔记第96天)
- 1.react的基础知识
- 防火墙设置的小问题(r6笔记第94天)
- 有没有必要把机器学习算法自己实现一遍?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (二)django--带APP的网站
- Spring Boot 自定義 HttpMessageConverter 解決 String 類型返回JSON對象問題
- spring之为级联集合属性进行赋值
- springmvc之HiddenHttpMethodFilter配置使用POST、GET、DELETE、PUT请求
- springmvc之使用@RequestParam绑定请求参数
- hadoop完全分布式之集群分发脚本
- 牛逼!9种方法让你访问Github提速到2MB/s!
- pyhton之如何将类的属性和方法设置成私有类型
- 【colab pytorch】查看gpu、cuda、cudnn信息
- 【colab pytorch】设置随机种子
- (三)django--带Template的网站
- spring之IOC(控制反转)和DI(依赖注入)
- 【colab pytorch】指定使用的显卡
- Python自学成才之路 迭代器的使用
- 回溯法--全排列