路由传参-使用 params 方式传递路由参数|学习笔记

简介: 快速学习路由传参-使用 params 方式传递路由参数

开发者学堂课程【Vue.js 入门与实战路由传参-使用 params 方式传递路由参数】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8198


路由传参-使用 params 方式传递路由参数


内容介绍

一、 路由规则传参

二、 修改参数

 

一、路由规则传参

Var router =new vuerouter({Routes:[{path:’/login/:id’, component: login},{path:’/register’, component: register }  ]}) <router-link to="/login/12”/is >登录</router-link><router-link to="/register">注册<router-1ink><router -view></ router-view></div>

此时右键浏览,可以正常展示:

1666939380560.jpg

接下来实践,把解析到的 id 放到网页当中去。

通过分析,可以发现, id 12 之所以能被解析出来,是因为 matched ,在 matched 内部有一个路由匹配规则, path 是自己手写的, matched 把 path 内部预解析成了表达式。用表达式继续去解析 fullpath ,接续出来的结果,可以给到 params 。

如果想要拿到 id 这个shuju,需要通过如下代码:

created(){//组件的生命周期钩子函数

console.log(this.$route.parama.id)

}

}

var login={

template: ‘<h1>登录--- {{$route.parama.id}}--- {{ $route.params.name}} </h1> ’,

 此时执行发现已经可以正常传递了。

 

二、修改参数

把在login中的登录里面的--- {{$route . query id }} --- 1 Sroute . query . name}}删掉,在把router-vue中登录的?id=10&name=zs删掉。在第二传参中,把规则改一下,把path里面的login后面添加/:id,在后面就当作id把它解析出来,在跳转的时候在后面跟一个id号。

执行发现不可匹配。

把console.og(this.$router 放出来,在到前端去看看:(图形如下:)

想要显示出id来,把console.og(this.$router)改为这个console.og(this.$router.params.id)。

将来在开发中,两种传参方式都可以使用,主要依据个人喜好选择即可。

相关文章
|
Web App开发 移动开发 安全
Struts2 S2-062 (CVE-2021-31805) 远程代码执行漏洞
Apache 官方发布了 Apache Struts2 的风险通告,漏洞编号为 CVE-2021-31805,可能会导致远程代码执行。
417 1
|
关系型数据库 PostgreSQL
postgresql查看服务与启动
服务启动,状态查看等等
2196 0
|
计算机视觉 Python
OpenCV形态学运算中梯度运算、顶帽、黑帽运算讲解与实战应用(附Python源码)
OpenCV形态学运算中梯度运算、顶帽、黑帽运算讲解与实战应用(附Python源码)
549 0
|
Kubernetes Java 关系型数据库
云原生之Kubernetes 集群部署nacos 1.4(集群版)
注册中心是微服务架构最核心的组件。它起到新服务节点的注册与状态维护的作用。微服务节点在启动时会将自身的服务名称、IP、端口等信息在注册中心中进行登记,注册中心会定时检查该节点的运行状态。注册中心通常会采用心跳机制最大程度保证其持有的服务节点列表都是可用的。
1073 1
云原生之Kubernetes 集群部署nacos 1.4(集群版)
|
Java 数据库连接 Maven
springBoot:项目建立&配置修改&yaml的使用&resource 文件夹(二)
本文档介绍了如何创建一个基于Maven的项目,并配置阿里云仓库、数据库连接、端口号、自定义启动横幅及多环境配置等。同时,详细说明了如何使用YAML格式进行配置,以及如何处理静态资源和模板文件。文档还涵盖了Spring Boot项目的`application.properties`和`application.yaml`文件的配置方法,包括设置数据库驱动、URL、用户名、密码等关键信息,以及如何通过配置文件管理不同环境下的应用设置。
951 1
|
缓存 负载均衡 应用服务中间件
Nginx反向代理优化
教你如何做好Nginx反向代理优化
391 5
|
DataWorks 监控 关系型数据库
利用 DataWorks 数据推送定期推播 MySQL 或 StarRocks Query 诊断信息
DataWorks 近期上线了数据推送功能,能够将数据库查询的数据组织后推送到各渠道 (如钉钉、飞书、企业微信及 Teams),除了能将业务数据组织后推送,也能将数据库自身提供的监控数据组织后推送,这边我们就以 MySQL (也适用于StarRocks) 为例,定期推播 MySQL 的数据量变化等信息,帮助用户掌握 MySQL 状态。
304 1
|
安全 JavaScript API
2024 年全栈开发者工具趋势
# 网络开发者 # javascript # 初学者 # 编程
|
JavaScript
vant(一)基于picker单选组件自定义picker多选组件~
vant(一)基于picker单选组件自定义picker多选组件~
1808 0
|
运维 监控 安全
【ELK入门】Elastic中文社区运维监控实战之架构篇
阿里云MVP曾勇撰写的《ELK运维监控入门实战》系列,以Elasticsearch中文社区网站运维监控体系搭建作为案例,讲解了ELK监控系统的相关原理和技术实现,可作为对ELK感兴趣的同学的入门级文章。本篇作为第一篇,介绍了项目背景和技术架构。
6855 0